[Resolved] Replace mobile menu with hamburger

Home Forums Support Replace mobile menu with hamburger

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1266659
    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.

    #1266775
    Leo
    Staff
    Customer Support

    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.

    #1267932
    Terry

    Okay, turned it back on.

    #1268123
    Leo
    Staff
    Customer Support

    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.

    #1268610
    Terry

    Done, please take a look.

    #1269156
    Leo
    Staff
    Customer Support

    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.

    #1269203
    Terry

    Done-progress.

    #1269247
    Terry

    And yes, that sort order works.

    #1269539
    Leo
    Staff
    Customer Support

    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.

    #1270794
    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.

    #1271093
    Terry

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

    #1271115
    Leo
    Staff
    Customer Support

    Glad I could help 🙂

    Nicely done!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.