Align dropdown nav with div

Hi Jonathan,

Give this a try:
https://generatepress.com/forums/topic/submenu-positioning/#post-1577943

Hi Ying,

Sorry, not working. I am using Header as Navigation, so I wonder if the NAV classes are different?

thx

Jon

Hi there,

Try this CSS:

@media(min-width:1036px){
li:hover ul.sub-menu {
    position: absolute;
    top: 63px;
}
}

@media(max-width:1035px) and (min-width:769px){
li:hover ul.sub-menu {
    position: absolute;
    top: 45px;
}
}

Hi Elvin,

Thanks. The problem is, if you move the mouse off the top NAV link to get to the SUBNAV, the SUBNAV disappears.

Here's you can see your CSS live:

https://pathwaysllc.spin350.com/

Jon

Hi Jonathan,

I modified the CSS a bit, this should work now:

@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: 75px;
        z-index: 2;
    }
    .main-navigation .main-nav ul ul {
        margin-top: 10px;
    }
}

Let me know :)

Thanks, that seems to work! :)

Great!

You are welcome :)

Hi, sorry to re-open this. My client noticed that, although the nav and sub-nav's are properly aligned to the bottom of the header, the first sub-nav item is not clickable.

Please see here:

https://pathwaysllc.spin350.com/

You'll notice under SERVICES that HOME HEALTH CARE is not clickable.

Thanks for any help!

Jon Cullen

Hi Jon,

Try to remove z-index: 2;from the CSS I provided here:
https://generatepress.com/forums/topic/align-dropdown-nav-with-div/#post-1671217

Let me know :)

Oh great, that worked. Thanks for your help!

Jon

You are welcome :)