[Resolved] Mobile menu alignment between non-sticky and sticky

Home Forums Support Mobile menu alignment between non-sticky and sticky

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1117868
    drew

    I’ve noticed that when the mobile menu is set to sticky, the location of the hamburger menu on non-sticky is left, but on sticky, it moves to the right:

    non-sticky: https://www.screencast.com/t/m6W6XmOWWy
    sticky: https://www.screencast.com/t/CO6dwIHic

    I assumed adjusting the non-sticky so it right aligns would be a straightforward change to the default float class. But that doesn’t seem to be the case 🙂

    What’s the recommended way to get the hamburger menu right aligned across all versions on mobile?

    #1117954
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    We move the mobile toggle to the far right because that’s typically where your finger is used to going on mobile for the menu.

    You can move it to the left with this CSS:

    .main-navigation.has-sticky-branding.navigation-stick .menu-toggle {
        order: 1;
        margin-right: auto;
    }
    
    .navigation-branding {
        margin-right: 0;
    }

    Hope this helps 🙂

    #1118457
    drew

    That works but I probably wasn’t clear. I agree that it works best right-aligned and was looking to reorder the hamburger menu so it was also right aligned in non-sticky mode as well.

    Having said that, this certainly works at keeping it aligned on the left in both sticky and non-sticky.

    #1118572
    Tom
    Lead Developer
    Lead Developer

    So would the “Book Now” be on the left?

    #1118574
    drew

    Yes, although modifying the Book Now button is easy enough since it’s a custom button set in place using the existing (and fabulous) mobile header hook. 🙂

    I was planning on tweaking it as needed anyway.

    #1118726
    Tom
    Lead Developer
    Lead Developer

    To achieve that layout in the sticky nav, I would remove the CSS I provided above and do this:

    .main-navigation.navigation-stick .mobile-bar-items {
        flex-grow: 1;
        display: flex;
        align-items: center;
    }
    
    .navigation-stick .mobile-bar-items .mobile-nav {
        margin-right: auto;
    }

    Non-sticky is different right now because the mobile header isn’t active.

    #1119760
    drew

    Closer. Here’s a mock-up of what I’m after: https://www.screencast.com/t/FMeoVQDgYa

    The most important element is the menu hamburger icon remains far right across both states.

    And I agree, using the mobile header would make this all easier and this client is a good example of one where their logo isn’t well-suited for mobile menu use (takes up too much space or end up reduced in size where the text is illegible). for a lot of Venture’s clients, this is a common design challenge and editing the logos isn’t an option.

    If you think this crosses the threshold into taking too much effort to accomodate, then the first option is likely best as it keeps the menu on the left across both states.

    #1120131
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    .main-navigation .mobile-bar-items {
        order: 1;
    }
    
    .main-navigation .menu-toggle {
        order: 2;
        margin-left: auto;
        flex-grow: 0;
    }
    
    .nav-search-active + .mobile-bar-items .mobile-nav {
        opacity: 0;
    }
    
    .main-navigation.has-sticky-branding.navigation-stick .menu-toggle {
        margin-right: 0;
    }
    #1120137
    drew

    That’s working out perfectly Tom, thanks so much. I’m saving all of these options as snippets as I especially like the first option for users with logos that aren’t too big but still aren’t well suited for the mobile header option.

    #1120446
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad I could help! 🙂

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