[Resolved] Replace mobile menu with hamburger

[Terry]

I’ve turned off the mobile menu because I want it to display in my header. If you pull up the page in mobile view, you’ll see the menu items listed in the right bottom part of the header. So, where the first item, About Us, I’d like to have a hamburger icon instead of the list.

So, is there a function I can apply that replaces the list with a hamburger?

I built the header with css grid, so if you go into chrome inspect, and hover over the div with class header-widget, you can see the grid pattern. In order to achieve this, I use a navbar short code instead of the normal header navbar, and built the component pieces with 5 header widgets. Your ability add header widgets is perfect for implementing grid.

[Leo]

Hi there,

I think the best solution would be to turn the mobile menu back on so we would have the default toggle.

Then we can use some CSS to tweak it to achieve the same layout as you have right now.

Can we try that first? Might take a few attempts but that’s the best way to use the toggle.

[Terry]

Okay, turned it back on.

[Leo]

Ok now try creating a hook element and add each the content like this:

<div class="social-icons hide-on-desktop">
    social icons here
</div>
<div class="phone-number hide-on-desktop">
    phone number here
</div>

Then select the inside_navigation hook.

[Terry]

Done, please take a look.

[Leo]

What was the order you want?

Menu > Social icons > Phone number > Search?

You’d want to replace social icons here and phone number here with the actual content.

[Terry]

Done-progress.

[Terry]

And yes, that sort order works.

[Leo]

Try this CSS:

@media (max-width: 768px) {
    .main-navigation .menu-toggle {
        -webkit-box-flex: inherit;
            -ms-flex-positive: inherit;
                flex-grow: inherit;
        width: auto;
        -webkit-box-ordinal-group: 0;
            -ms-flex-order: -1;
                order: -1;
    }
    .main-navigation:not(.slideout-navigation) .inside-navigation {
        justify-content: space-between;
        align-items: center;
    }
}

I would also mention that those 4 things take up a lot of space so there might not be enough room on a smaller mobile screen.

[Terry]

Very good–looks great. I got rid of the phone number on the mobile view. The only thing I might need help with now is that the order of these items switches when you page down and it goes into mobile header view. I’ll see if I can fix that myself, though. Thanks very much for your help.

[Terry]

Played with flex order and got it just like I want it. Thanks again.

[Leo]

Glad I could help 🙂

Nicely done!

[Author]

Posts