[Resolved] Permanently expanded sub-menus

[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

[David]

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

[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.

[David]

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.

[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!

[David]

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.

[Barbara]

Perfect, thank you!

[David]

Glad to be of help.

[Author]

Posts