[Resolved] Sub-menu vertical position

[ch1800]

Hi Guys,

For some reason sub-menu items are now detached vertically from main menu at this particular site.
I don’t really know whether this was already that way but it happens I had to resume working on this site the same day I updated GP, so maybe this is related to the update or I never noticed it was that way…

Anyhow: how can I shift sub-menus items up closer to main menu please?

Many thanks!

UPDATE: I now see that I have this in my custom CSS that was used for vertically centering the menu items in header and that seems also to create the gap with sub-menu items:

.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
    line-height: 150px;
}

Is there a way to keep this vertical alignment as is and reduce the empty gap with sub-menu items?

[David]

Hi there,

try adding this CSS to vertically centre the nav and logo:

@media (min-width: 769px) {
    .inside-header {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }
    .site-logo {
        margin-left: auto;
    }
}

Then you can reduce the line-height of the menu items

[ch1800]

Many thanks!

[David]

You’re welcome

[Author]

Posts