[Resolved] Sub item In nav bar

Home Forums Support [Resolved] Sub item In nav bar

Home Forums Support Sub item In nav bar

  • This topic has 10 replies, 4 voices, and was last updated 1 year ago by Elvin.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1469779
    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

    #1469832
    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!

    #1469932
    Leo
    Staff
    Customer Support

    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?

    #1470976
    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

    #1471088
    Leo
    Staff
    Customer Support

    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/

    #1471776
    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!

    #1472132
    Tom
    Lead Developer
    Lead Developer

    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?

    #1472268
    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

    #1472276
    Elvin
    Staff
    Customer Support

    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;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1473205
    Jana

    Thank you – that all worked great!

    #1473739
    Elvin
    Staff
    Customer Support

    Awesome. No problem.:)

    A wise man once said:
    "Have you cleared your cache?"

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.