Archived topic

Sub-menu vertical position

3 replies · Started by ch1800 on November 21, 2019

Viewing posts 1–4 of 4

November 21, 2019 at 7:45 pm #1071728

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?

November 22, 2019 at 5:29 am #1072276

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

November 22, 2019 at 6:34 am #1072359

Many thanks!

November 22, 2019 at 7:05 am #1072583

You're welcome

This archived topic is closed to new replies.

Start building better websites today.