menu CSS

[Cosmic]

is anyone able to tell me how I can address the CSS for the margin/padding on secondary menu items? I want to narrow the gap between the items.

Thanks in advance.

[ABGenc]

.ipsNavBar_secondary { height:40px }

I think :)

[Cosmic]

thanks, but no ... it's nothing of the possibilities between .ipsNavBar_secondary and .ipsNavBar_secondary > ul > li > a (all of which i've tried).

[ABGenc]

Interesting, when I Inspect the element and change the height it directly affects as seen below

[Cosmic]

yep - but you're addressing just the horizontal bar, and not the menu items displayed on that horizontal bar.

It's the actual menu items I want to change, specifically the margins or paddings between them.

[ABGenc]

Ok I get it now. Then it seems ;

.ipsNavBar_secondary > li > a {
    color: rgba(50,50,50,0.6);
    font-size: 13px;
    padding: 12px 18px 8px;
    border-bottom: 2px solid transparent;
}

 

[Cosmic]

Yep,that's it. Brilliant, thank you.

I tried that combination, but with a 'ul' in there as well - which must have been my error.

[ABGenc]

Finally I was able to address  Glad it helped :)

[abetts]

On a similar theme (gettit!), what do I need to change in the css to reduce the horizontal padding in the main menu please?

[steve00]

12 minutes ago, abetts said:

On a similar theme (gettit!), what do I need to change in the css to reduce the horizontal padding in the main menu please?

.ipsNavBar_primary > ul > li > a {
  padding: 9px 25px;
}

change the 25px to your own requirements

[abetts]

Perfect, thank you