[Resolved] Sub item In nav bar

[Jana]

I’d like indent each sub-items in my menu. And separately, is there a way to add a hairline between the items? Thanks, Jana

[Jana]

And also would like to learn how to make the distance between all the menu items much smaller (they’re very spread out) in the phone and mobile versions. Thanks!

[Leo]

Hi there,

Try this CSS:

.main-navigation .main-nav ul ul li a {
    padding-left: 25px;
}
.main-navigation .main-nav ul ul li:not(:last-child) a {
    border-bottom: 1px solid #fff;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

And also would like to learn how to make the distance between all the menu items much smaller (they’re very spread out) in the phone and mobile versions.

Are you referring to horizontal or vertical spacing here?

[Jana]

The top css was great for adding lines but it didn’t make the sub item only indent – it made all the items indented – I’d like only the sub-menu items (the only under the main items) to be indented.

And I mean the vertical spacing – the menu items are all so far apart in the mobile and tablet versions that they go below the page.

Thanks, Jana

[Leo]

That CSS should definitely only make the sub menu indent.

The CSS is currently missing the px number. Can you add it in first?
https://www.screencast.com/t/z2M09pV7ChWI

As for vertical spacing, have you tried reducing the menu item height with the mobile toggle activated?
https://docs.generatepress.com/article/menu-item-height-width/

[Jana]

I removed the numbers because it was indenting both the pulldown main primary items and the sub-items (secondary) – and I only want the secondary items indented.

And far as using the ‘Menu item height’ for making the vertical height of the primary pulldown menu items – it makes the whole main menu background smaller in the top bar (which I don’t want). I just want the vertical height of the primary pulldown menu items on mobile and tablet versions to be closer together (have less height). The height of the secondary menu items is fine.

Thanks for helping me work this out!

[Tom]

Hi there,

Try this for the height:

.main-navigation.toggled .main-nav ul li a {
    line-height: 40px;
}

The sub-menu indent looks good right now, did you get that sorted?

[Jana]

Great! That worked to tighten up the menus vertically. How do I get the 3rd sub item to indent from the 2nd sub item – then I’ll be all set! Thanks, Jana

[Elvin]

You can try adding this code for the sub-items of the sub-items. 😀

.main-navigation .main-nav ul ul ul li a {
    padding-left: 40px;
}

[Jana]

Thank you – that all worked great!

[Elvin]

Awesome. No problem.:)

[Author]

Posts