Sandwich mobile menu icon is not showing.

Hi there,

You have this CSS added in your customizer > additional CSS:

.main-navigation .inside-navigation .menu .slideout-toggle,
button.menu-toggle,
.slideout-overlay {
    display: none !important;
}

DELETE that

Hello David,

I deleted CSS code you point out and now sandwich menu is showing but, it is showing double, how I can remove extra one? Also, how I can show sandwich menu icon to show on the left side at the beginning and also do the same on the right side to the end for search icon?

Because I don't find option on customizer.

Thanks!

Add this CSS:

@media(max-width: 768px) {

    /* remove secondary nav on mobile */
    #secondary-navigation {
        display: none;
    }

    /* Position toggle left */
    .main-navigation .menu-toggle {
        order: -1 !important;
        margin-right: auto;
    }

    /* Center Branding */
    .navigation-branding {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translatex(-50%);
    }
}

Thanks David, I added CSS code you recommend and it seems it removed double one, now how I can place sandwich menu icon to the left and place it to the left start and search icon to the right end?

Thanks,

Sara

Looks like it's already like that?

Toggle on the left and search on the right?
https://www.screencast.com/t/yLy6hmgfN

Hello Leo,

For mobile is showing like that but, for tablet and desktop is not. How can I set it up so, it shows like that for tablet and desktop too?

Thanks!

Hi there,

This should do it:

@media (min-width: 769px) {
    #primary-menu .slideout-toggle {
        position: absolute;
        left: 0;
        top: 0;
    }

    #primary-menu .search-item {
        position: absolute;
        top: 0;
        right: 0;
    }
}

Thanks a lot Tom

You're welcome :)