[Resolved] Sandwich mobile menu icon is not showing.

[Anonymous]

Hello,

I am trying to place mobile menu with sandwitch on my top navigation bar but does not seem to be working. Can you please tell me how to do it?

Thanks!

[David]

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

[Anonymous]

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!

[David]

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%);
    }
}

[Anonymous]

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

[Leo]

Looks like it’s already like that?

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

[Anonymous]

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!

[Tom]

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;
    }
}

[Anonymous]

Thanks a lot Tom

[Tom]

You’re welcome 🙂

[Author]

Posts