- This topic has 10 replies, 2 voices, and was last updated 3 years, 8 months ago by David.
-
AuthorPosts
-
July 29, 2020 at 6:25 am #1380452Nadine
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 #1380522DavidStaffCustomer SupportHi there,
can you unlock that image so we can view – it currently requires access to be granted 🙂
July 29, 2020 at 7:29 am #1380527NadineHi 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 #1380616DavidStaffCustomer 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.July 29, 2020 at 8:26 am #1380753Nadinethank 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 #1380871NadineI’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 #1380891DavidStaffCustomer 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; }
July 29, 2020 at 1:13 pm #1381064NadineThank 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 #1381170DavidStaffCustomer SupportIts a tricky layout I must admit. Let us know how you get on
July 30, 2020 at 11:39 am #1382212NadineIt’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 #1382656DavidStaffCustomer 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
-
AuthorPosts
- You must be logged in to reply to this topic.