[Support request] Move Hamburger for off canvas from right to left of logo

Home Forums Support [Support request] Move Hamburger for off canvas from right to left of logo

Home Forums Support Move Hamburger for off canvas from right to left of logo

  • This topic has 5 replies, 3 voices, and was last updated 1 week ago by Elvin.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2074116
    Dominic

    Sorry I’m sure this is simple, searched on forum but can’t find.

    I have the off canvas menu set (no primary menu at top, set to blank).
    Currently the hamburger is far left, i’d like it to be far left, left of the logo.

    Thanks!

    #2074406
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site that has the header setup with the off canvas burger to the right ? once i see the layout i can provide the necessary CSS

    #2074424
    Dominic
    #2074436
    David
    Staff
    Customer Support

    So theres a couple of steps:

    1. Add this PHP Snippet – this will make sure the Search Icon stays put:

    https://generatepress.com/forums/topic/re-menu-not-displaying-properly/#post-1793602

    2. Then this CSS to move the toggle to the left of the logo:

    .main-navigation .menu-bar-items,
    #mobile-header .menu-toggle {
        order: -1;
    }
    #mobile-header .menu-toggle {
        padding-left: 20px;
    }
    #2074723
    Dominic

    Thanks very much David.

    The search icon is now between the hamburger and logo – I added the PHP snippet.

    Any way to get the search icon to stay on the right?

    Thanks!

    #2074745
    Elvin
    Staff
    Customer Support

    Hi Dominic,

    Any way to get the search icon to stay on the right?

    Will this be for mobile only?

    If yes, modify this custom CSS on your site –

    .main-navigation .menu-bar-items, #mobile-header .menu-toggle {
        order: -1;
    }

    Wrap it on a @media rule so it only applies to desktop. (effectively exempting mobile)

    @media (max-width:768px){
    .main-navigation .menu-bar-items, #mobile-header .menu-toggle {
        order: -1;
    }
    }

    Or remove it completely if you want the desktop to be on the right side as well.

    A wise man once said:
    "Have you cleared your cache?"

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