- This topic has 9 replies, 3 voices, and was last updated 4 years, 11 months ago by Tom.
-
AuthorPosts
-
April 10, 2019 at 7:44 pm #865602Hazel
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.
April 10, 2019 at 7:58 pm #865605LeoStaffCustomer SupportHi 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 ๐
April 11, 2019 at 6:29 pm #866666HazelHi 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.April 12, 2019 at 8:28 am #867257LeoStaffCustomer SupportNot 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.
April 12, 2019 at 7:05 pm #867604HazelHi 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.
April 12, 2019 at 8:23 pm #867625LeoStaffCustomer SupportYou 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/April 13, 2019 at 4:39 am #867798HazelHi Leo
Thanks. I didn’t realise the logo could be as large as I wantedApril 13, 2019 at 10:07 am #868051LeoStaffCustomer SupportWouldn’t make the suggestion if it wasn’t going to work ๐
Glad it’s working for you ๐
April 13, 2019 at 9:58 pm #868289HazelHi 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?
April 14, 2019 at 6:59 am #868601TomLead DeveloperLead DeveloperFor sure, try this CSS:
#site-navigation .inside-navigation { padding: 10px 0; }
-
AuthorPosts
- You must be logged in to reply to this topic.