[Resolved] Submenu positioning

[Nick]

In desktop screen widths, is it possible to have the submenu appear 10px lower when it expands?

See website link and picture below.

Thanks!

[Ying]

Hi Nick,

Yes it’s possible, here’s the css:

@media (min-width: 769px) {
    .main-navigation ul.sub-menu {
        margin-top: 10px;
    }
}

But by lowering the submenu the Hover dropdown option won’t work well.
It’s better to change it from Hover to Click – Menu Item in customizer.

Let me know 🙂

[Nick]

Cheers Ying – yes I see your point there. Would it be possible to increase the clickable area in CSS of the sub-menu to make it more forgiving and stop it closing as quickly when you move the mouse pointer down? I’ve seen it done on buttons before etc..

[David]

Hi there,

try this CSS instead:

.main-navigation .main-nav ul li a,
.site-logo {
    margin-bottom: 10px;
}

[Nick]

thanks David – Doesn’t seem to work there….indeed isn’t the new code adjusting the site-logo? Am trying to stop the sub-menu closing when you move the mouse cursor down from the “About” menu option into the sub-menu (given we now have put a gap between the primary menu bar and the sub-menu block) – see website link.

[Ying]

Hi Nick,

Make sure that you replace the css I provided previously:

@media (min-width: 769px) {
    .main-navigation ul.sub-menu {
        margin-top: 10px;
    }
}

with this set of new css.

@media (min-width: 769px) {
    .main-navigation .main-nav ul li a, .site-logo {
        margin-bottom: 10px;
    }
}

Let me know 🙂

[Nick]

Thank Ying – yep I replaced (you can see the new version live now). This new css just seems to make the primary menu bar taller (and the gap between the primary menu bar and the sub menu we wanted has disappeared).

[David]

Try this CSS instead of all the others:

@media(min-width: 769px) {
    .main-navigation .main-nav ul li.menu-item-has-children:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px; /* height of nav plus space below */
    }

    .main-navigation .main-nav ul ul {
        margin-top: 10px;
    }
}

[Nick]

thanks David / Ying – that works perfectly. Appreciated.

[David]

Glad we could be of help

[Author]

Posts