Dividers between menu items – height and without the right and left one

[Nele]

I use for the primary menu the option to add colored dividers between menu items.

How can I remove the right and the left one and how can I give them less height in Weaver Xtreme?

It should look like the primary menu on this homepage (styled with weaver II pro): http://j-bunge.de/  

I cannot find the correct CSS Rule – thank you for help!

Site: http://xn--holzkrper-47a.de/

[scrambler]

The bars are high, because you made your menu bar high using the Desktop menu Vertical padding box. The bars are applied on the links (a tags) and the menu vertical padding box also affects the links, so if you increase that you increase the bars.

So remove the value in there.

Then add the @media rule below with the 4 rules inside in Main Options > Fonts & custom > Custom CSS Rule box

The first one add a top an bottom margin to the li elements to create the space above and below the menu bar without affecting the bars
Rules 2 & 3 remove the first and last vertical border
The 4th one reduces the height of the bar by reducing the first padding value (top/bottom) on the menu items

@media(min-width:768px) {
#nav-primary ul li {margin:1em 0;}
.menu-primary ul.wvrx-menu > li:first-child {border-left:1px solid #FFFFFF !important;}
.menu-primary .wvrx-menu li:last-of-type a {border:none !important;}
.wvrx-menu a {padding:.3em .75em !important;}
}

[Nele]

Thanks a lot for the help and explanation! It works just fine.

[Author]

Posts