[Support request] Mobile menu: swap position of search icon and hamburger menu

[Michael]

Please see this screenshot. https://www.dropbox.com/s/7sv6tyosnxhsiqg/2019-03-31-01.png?dl=0

Any way to swap the menu and search icon so the search icon is on the left, and the menu on the right?

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

I don’t mind sharing the site, but it’s in development and you’ll need to tweak your hosts file like this to see it:

146.66.113.68 wayofadog.com http://www.wayofadog.com

My impression is that the standard mobile layout is hamburger menu on the left, search on the right; I’m just asking how to reverse those positions. Thanks.

[Leo]

Is the mobile header option activated?
https://docs.generatepress.com/article/mobile-header/

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

No, mobile header is currently OFF. However, even if it’s on, the position of the hamburger menu relative to the search icon does not change.

[Leo]

Yes I know. Just need to know so I can get the CSS right:

.main-navigation .mobile-bar-items {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
}
.main-navigation:not(.slideout-navigation) .mobile-bar-items+.menu-toggle {
    text-align: right;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

That almost worked, menu moved to right, but search icon is still there too, overlaying the menu.

See screenshot: https://www.dropbox.com/s/kytij67wgj3tsoz/2019-04-01-03.png?dl=0

[Leo]

Hmm I actually tested the code and it was working for me:
https://www.screencast.com/t/mPmDRx9Y

Any chance you can make the site live for a short period so I can see?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

Hmm…that is odd. Currently the only way to see the site is to modify your hosts file like this:

146.66.113.68 wayofadog.com http://www.wayofadog.com

That’s the only live view available.

[Leo]

Can you first make sure to clear any caching plugin you might have and make sure you are using the latest version for the theme and premium plugin?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

GP Premium Version 1.7.8
Theme Version: 2.2.2

All caching disabled (because I’m building the site)

[Leo]

I’m still not able to see the site even after modifying the host file.

I think the issue is that I’m running the beta version and the CSS for mobile has been updated a bit so we can achieve the request like yours easier.

Do you mind giving the beta version a shot since you are on development site anyways?
https://generatepress.com/gp-premium-1-8/

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

Thanks Leo, but I think I’ll need to revisit this issue a little later. I don’t want to take the chance of something going wrong with an alpha version of the theme while I’m trying to get this site out the door in the next few days. I’ll get back to you when the site goes live, which will make access easier, and by that time, the production version of 1.8 will likely be available as well. Thank you.

[Leo]

Good idea.

Just comment here again when you need another look 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts