Permanently expanded sub-menus

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

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.

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.

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!

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.

Perfect, thank you!

Glad to be of help.