Archived topic
Logo left, hamburger right
9 replies · Started by Hazel on April 10, 2019
I found this code from Tom on the forum to float the logo left and the hamburger right but it doesn't seem to do anything to the site.
@media (max-width: 768px) {
.nav-float-right .main-navigation {
float: right;
}
.nav-float-right .site-logo {
float: left;
}
}P.S. I'm not using the actual mobile menu.
Hi there,
I believe this method would work the best for the layout you are after (both desktop and mobile):
https://docs.generatepress.com/article/navigation-as-a-header/
Note that we’ve made the navigation as a header an option in the next version of GP Premium which is already in release candidate 1 so quite stable:
https://generatepress.com/gp-premium-1-8/
Let me know if this helps 🙂
Hi Leo
Thanks for the reply. I'll certainly use the navigation as header feature in future but this client REALLY wants to have the desktop header on smaller screen sizes. It's working very well except logo and nav are centered. The code to float the logo left and the nav right in my earlier question was provided on this forum for just such an occasion but it isn't working.
Any ideas would be appreciated.
Not sure if I understand.
If you use my suggested above, you would have the logo on the left and menu on right in both desktop and mobile as mentioned.
Hi Leo
Looking at the example page you directed me to I see the menu and a tiny logo. The client wants it to look the way it already does with larger logo and a gradient background. Am I missing something?
By the way, what is estimated release date for Premium 1.8. The site in question is going live next week and I'm reluctant to upgrade to a Release Candidate.
You can create the exact layout as you have right now with the navigation as a header method.
Have you tried it yet?
You can follow the 6 steps here if you don't want to use 1.8:
https://docs.generatepress.com/article/navigation-as-a-header/
Hi Leo
Thanks. I didn't realise the logo could be as large as I wanted
Wouldn't make the suggestion if it wasn't going to work ;)
Glad it's working for you :)
Hi Leo
I don't know if I used the best solution but the logo didn't show on some screens using 1.8 so I added menu item height until it did. It was made a bit more difficult because the tablet and phone previews didn't seem all that accurate.
Is it possible to add some top and and bottom padding to the navigation if required?
For sure, try this CSS:
#site-navigation .inside-navigation {
padding: 10px 0;
}