Archived topic
Move topbar, menu icon to left on mobile
7 replies · Started by Jonathan on June 22, 2021
I know this question has been asked several times, but none of the solutions seem to be working for me. You will see from the design that mobile very much needs to have those elements to the left: http://www.lamppostsites.com
And while you're at it :), I would love to have "call us" closer to the phone icon. They are together in the current incarnation of the site and I can't figure out what I did differently.
Thanks!
Hi Jonathan,
You can try this CSS:
@media (max-width: 768px) {
.top-bar aside#media_image-3 {
margin-right: 0 !important;
margin-left: 0 !important;
}
.inside-top-bar.grid-container.grid-parent {
padding: 35px 0px 10px 0;
float: left;
}
}I'm afraid that didn't help with either problem. If I deleted the other CSS and used just this, it did move the topbar slightly but still not to where the logo is. And deleting the other CSS brought back alignment problems I had with desktop.
Also, please note I need the menu icon moved to the left as well. Thanks!
You are missing one } in your CSS, and I added one line of CSS in my previous reply:
https://www.screencast.com/t/WakYMxf2V
For the menu toggle:
@media (max-width: 768px) {
button.menu-toggle {
padding-left: 0 !important;
text-align: left;
}
}Let me know if it works :)
Fixed the menu toggle great. But it moved the topbar just a bit, still not all the way left. Doesn't make sense to me that it moved some but not all, with no padding, but coding remains a mystery to me. 🙂
Need one more line of CSS:
https://www.screencast.com/t/0HxK8s8U3Tx
I've updated here:
https://generatepress.com/forums/topic/move-topbar-menu-icon-to-left-on-mobile/#post-1831507
Code can be tricky, but code never lies :P
Sweet! Thank you!!
No problem :)
