Mobile Navigation Styling

Hi there,

try adding this CSS:

@media(max-width: 800px) {
    .main-navigation:not(.slideout-navigation):not(.toggled) .main-nav>ul {
        display: block;
    }

    #masthead #site-navigation {
        height: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in;
        position: fixed;
        top: 58px;
        left: 0;
        right: 0;
        bottom: 0;
        margin-top: 0;
        background-color: #fff;
        z-index: 1000;
        pointer-events: none;
    }
    /* adjust positon when admin bar is present */
    .admin-bar #masthead #site-navigation {
        top: 90px;
    }
    #masthead #site-navigation.toggled {
        max-height: 1000px;
        pointer-events: initial;
        overflow-y: scroll;
    }

    .mobile-menu-open body {
        overflow: hidden !important;
    }

    .main-navigation .main-nav > ul > li {
        border-bottom: 1px solid #ccc;
    }
    /* Mobile search field */
    .mobile-menu-open .navigation-search {
        position: static;
        pointer-events: initial;
        visibility: visible;
        opacity: 1;
        padding: 10px;
    }
    .main-navigation .navigation-search input[type="search"] {
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #f1f1f1;
    }
    .mobile-menu-open .search-item {
        opacity: 0;
        pointer-events: none;
    }
}

Hey David,

I appreciate the help and it looks great. Would it be possible to remove lines under every sub menu item, and just keep the line at the end of the expanded parent menu? Also, does it require an off-canvas menu to insert the search box into the menu?

Thanks for the help

Try the revised CSS above.

Awesome man. Appreciate the help.

You're welcome!