Archived topic
Menu layout below logo
9 replies · Started by Helen on March 29, 2021
Hi
I am trying to figure out how I can drop the menu bar underneath the logo only for mobile view. As the way it is now, it sits on the right side of the logo and even right side but below the logo on smaller screens. And when clicked, the items open on the right side underneath the logo instead of underneath the menu. So it doesn't look nice.
(You can check it on http://scriptconsultant.ca)
If the menu would drop underneath the logo and both could be centered I think would look better.
Is there a way to do that on only mobile view and not on desktop view?
Thanks
Hi there,
If you want it to be laid out like this: https://share.getcloudapp.com/z8u67vJv
Go to Appearance > Customize > Layout > Header.
Enable "Mobile header" and set your logo.
You then add this CSS:
#mobile-header .mobile-header-logo{
width:100%;
display:flex;
justify-content: center;
}
#mobile-header .inside-navigation{
display:flex;
justify-content: center;
}If this is not the case, can you provide any mockup of how you want it laid out?
Let us know.
Yes, that looks good! Thanks :)
I followed your instruction and it works. Just the logo became very very tiny. Is there a way to make the logo bigger on mobile?
my logo size uploaded is 317px x 120px.
I gave a height of 120px to both
#mobile-header .inside-navigation, .mobile-header-navigation .site-logo.mobile-header-logo img{
height:120px;
}
But this messes up navigation with logo. Is there a better option to do so?
I guess I fixed that issue too. I needed to give the height to #mobile-header .mobile-header-logo instead of #mobile-header .inside-navigation.
It looks nice now :)
Thanks a lot!
I followed your instruction and it works. Just the logo became very very tiny. Is there a way to make the logo bigger on mobile?
my logo size uploaded is 317px x 120px.
Can you link us to the site you're working on? To check for the mentioned issue and have a better CSS writeup that fits your preference.
You can use the private information text field if you wish to keep it private. Let us know.
I guess I fixed that issue too. I needed to give the height to #mobile-header .mobile-header-logo instead of #mobile-header .inside-navigation.
It looks nice now 🙂
Thanks a lot!
Ah saw this late.
Glad you sorted it out. No problem.
(You can check it on http://scriptconsultant.ca)
It is nice now but if there is a better styling I would really appreciate it.
(You can check it on http://scriptconsultant.ca)
It is nice now but if there is a better styling I would really appreciate it.
It looks good now. I was gonna say you should check for the proper selectors and you seem to have done that already when you changed .inside-navigation to .mobile-header-logo. :)
Great, thank you very much :)
No problem. Feel free to open new topics if you have other questions. :D
