- This topic has 10 replies, 2 voices, and was last updated 5 months, 3 weeks ago by
David.
-
AuthorPosts
-
July 29, 2020 at 6:25 am #1380452
Nadine
Hi,
I’m trying to do the following on mobile – logo on left, phone button next to hamburger menu on right, with translator drop down below that on right.I mocked it up, hopefully the image below works!Edit: trying a different place
Thanks!
July 29, 2020 at 7:22 am #1380522David
StaffCustomer SupportHi there,
can you unlock that image so we can view – it currently requires access to be granted 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 29, 2020 at 7:29 am #1380527Nadine
Hi David, thanks. I tried unlocking but it still wasn’t showing so I loaded onto the site instead. I edited my original comment.
July 29, 2020 at 7:48 am #1380616David
StaffCustomer SupportIn your child theme you have some CSS for your mobile media query.
Replace it with this:@media (max-width: 768px) { .inside-header { display: flex; } .site-logo { margin-right: auto; } .phonebtn { order: 1; } .menu-toggle { line-height: 40px; order: 4 } #translator { order: 10; flex: 1; justify-self: flex-end; margin: 10px 0; } #translator .switcher { margin: 0 10px 0 auto; } #site-navigation { margin-top: 0 !important; } .top-bar { font-size: 16px; } }
Should get us close.
In Customizer > Layout > Primary Nav – you can delete the Mobile Menu label.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 29, 2020 at 8:26 am #1380753Nadine
thank you so much for this, it really got me far, but I’m still having trouble with the sticky header on mobile. I’m not sure if it’s just caching or if I’m just not hitting the right things.
July 29, 2020 at 10:06 am #1380871Nadine
I’m so close, the only thing I can’t get sorted is the translator dropdown on the mobile sticky header. I’m not sure why it’s different than the regular header, I can’t find a different class for it in the sticky header.
July 29, 2020 at 10:19 am #1380891David
StaffCustomer SupportWithin media query change:
#translator .switcher { margin: 10px auto; }
for this:
#translator .switcher { margin: 0 10px 10px auto; }
and then add this:
.main-navigation.is_stuck #translator .switcher { position: relative; top: -30px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 29, 2020 at 1:13 pm #1381064Nadine
Thank you so much David! I’m still having some trouble on different phones, but I’ll try again tomorrow to make sure it’s not server caching.
July 29, 2020 at 3:49 pm #1381170David
StaffCustomer SupportIts a tricky layout I must admit. Let us know how you get on
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 30, 2020 at 11:39 am #1382212Nadine
It’s still not right on mobile. The sticky header is a bit wonky. The translator dropdown is underneath and the menu is as well.
July 31, 2020 at 1:15 am #1382656David
StaffCustomer SupportWhat if we use the Mobile Header – it will provide consistency between static and sticky header ?
Theres theinside_mobile_header
hook you can use to add your button and translator.It will still take some CSS. Let me know
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.