[Support request] menu switches sides on mobile

Home Forums Support menu switches sides on mobile

  • This topic has 11 replies, 2 voices, and was last updated 7 months ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1166812
    Daniel

    Hi,

    I’ve set up the off canvas menu icon to be on the right of the logo, but on mobile it changes to the left.

    Thanks,

    Dan

    #1166860
    David
    Staff
    Customer Support

    Hi there,

    Disable the Mobile Header in Customizer > Layout > Header

    #1166907
    Daniel

    Hi David,

    Thanks, but a new problem now. That has put the icon to the right but has added a second one below it.

    Cheers,

    Dan

    #1166963
    David
    Staff
    Customer Support

    Aah ok – i see what you have done.
    So instead of adding the menu toggle as a menu item for display in the nav try this instead:

    1. Create a Menu with no menu items in it and assign this to your Primary Navigation.
    2. In Customizer > Layout > Off Canvas – make sure this is set to display ( for desktop and mobile ).

    What this will do is only display the Off Canvas Toggle for both desktop and mobile.

    #1166970
    Daniel

    That didn’t quite work either. Now it has an extra toggle to the bottom left. I don’t think I did have the toggle as a menu item (apologies if I’m wrong about that). I think what might be the issue is that I have added CSS to make the logo centered. If I take that out then I don’t have two toggles, but then I don’t have the centered logo of course. This is the code I’ve got for the centering. And I had “menu-item-separator” as an invisible part of the menu.

    .inside-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    }

    .header-widget {
    order: 10;
    overflow: visible;
    }

    .nav-float-right .header-widget {
    top: auto;
    }

    .nav-float-right .header-widget .widget {
    padding-bottom: 0;
    }

    .site-branding,
    .site-logo {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 200;
    }
    #mobile-header .mobile-bar-items {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
    margin-left: auto;
    }
    #site-navigation {
    float: none;
    width: 100%;
    }

    .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    }

    .main-navigation .menu-item-separator {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    }

    .main-navigation .menu-item-separator a {
    font-size: 0;
    background: transparent !important;
    }

    .slideout-navigation .menu-item-separator,
    .main-navigation.toggled .menu-item-separator{
    display: none !important;
    }


    @media
    (max-width: 768px) {
    .inside-header>:not(:last-child):not(.main-navigation) {
    margin-bottom: 0;
    }
    }


    @media
    (min-width: 769px) {
    #sticky-navigation .main-nav,
    #sticky-navigation .main-nav .menu-item-separator {
    flex: 1;
    }

    #sticky-navigation .navigation-branding {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    }
    }

    #1167164
    David
    Staff
    Customer Support

    Now you can delete all of that CSS and add this:

    .site-logo,
    #sticky-navigation .navigation-branding {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translatex(-50%);
    }
    
    .main-nav {
        width: 100%;
    }
    #1167178
    Daniel

    Getting closer I think. Now the only problem is that the toggle switches to the left once I start scrolling.

    #1167191
    David
    Staff
    Customer Support
    #1167197
    Daniel

    That fixed some of it. Now it only switches left when scrolling on mobile.

    #1167201
    David
    Staff
    Customer Support

    Doh!

    add this lol:

    .main-navigation .menu-toggle {
        margin-left: auto;
    }
    #1167203
    Daniel

    Perfect! Thanks for your help!

    #1167205
    David
    Staff
    Customer Support

    Phew – Glad we got there – think i need some coffee lol
    you’re welcome

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