[Resolved] Permanently expanded sub-menus

Home Forums Support Permanently expanded sub-menus

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #865310
    Barbara

    Hi,

    I’d like to have a menu with permanently expanded sub-menus (so they are visible and accessible with one click).
    After they are expanded, I would also like the little arrows to the right of the main menu items to dissappear, as well as the light shadow border around sub-menu items.

    Can you please give me a CSS code to achieve this?

    Thank you.
    Kind regards,
    Barbara

    GeneratePress 2.2.2
    #865377
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    .dropdown-click #site-navigation.main-navigation ul ul {
        visibility: visible;
    }
    
    #site-navigation.main-navigation ul ul {
        box-shadow: none;
        float: none;
        left: initial;
        opacity: 1;
        pointer-events: initial;
        height: auto;
    }
    
    #site-navigation .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
    #865400
    Barbara

    Hi David,

    Thank you, that works nicely.

    Just two more things:
    1. How can I make only main menu bold, without the setting affecting sub-menus?

    2. Menu in tablet and mobile versions is not centered anymore and also the menu is not expanded on them.
    Here’s the screenshot: https://screencast.com/t/blixFQLEjyJg
    Can I get a code to fix this too please?

    A side question: Can all the extra CSS slow down my site? It doesn’t seem like it does but just wonder if it’s important to keep it to a minimum.

    Thank you.

    #865452
    David
    Staff
    Customer Support

    1. This CSS will change the font weight of the parent menu items:

    .main-navigation ul li.menu-item-has-children > a {
        font-weight: 700;
    }

    2. I edited the CSS above so – by removing the @media query it will apply to all devices. It will fix the centring as well.

    That amount of additional CSS won’t have an impact on your site speed.

    #865676
    Barbara

    Hi David,

    Thanks, that works except for the two bottom menu items that have no sub-menus – these are not affected by this CSS but I’d like to have them bold too:
    https://screencast.com/t/BSCPvFZ5gkHc

    Another thing I see now: I’d love to be able to adjust/change the spaces (height) between main menus and sub-menus in a way that there would be more space above main menu items and less space bellow them.
    A screenshot for a clearer picture of the spaces I mean:
    https://screencast.com/t/ti8Y5zA5A0RF
    I can’t seem to do this with customisation options since it creates same amount of space everywhere. I hope what I’m asking for isn’t too complicated!

    Thank you!

    #865889
    David
    Staff
    Customer Support

    So use this CSS instead, it will cover all parent menu items and fix the spacing:

    .main-navigation ul.menu>li>a {
        font-weight: 400;
        padding-top: 20px;
        padding-bottom: 2px;
    }

    You can adjust the padding values to suit.

    #866770
    Barbara

    Perfect, thank you!

    #866890
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.