Archived topic
Trouble align Logo & Toggle-Menu on my mobile version.
9 replies · Started by Siong Boon Lim on October 26, 2019
My logo and menu was too big on the mobile version.
I have followed some codes found on this support site.
Currently I managed to get a look and feel close to what I wanted.
When in small screen, my logo/menu is able to change its size,
but however both of them are horizontally center align to the page.
I would like the logo to be aligned to the left,
while the toggle-menu align to the right.
Would need help on this.
Been trying out many ways but could get my alignment right.
I tried it.
The logo becomes very very small inside the header.
The logo cannot be seen clearly.
I could not achieve what I wanted.
I would like to maintain my current logo menu size.
Just shift the logo to the extreme left, and the toggle-menu to the extreme right.
That's exactly what mobile header option is for.
Can you activate it again and increase the menu item height with the mobile toggle turned on?
https://docs.generatepress.com/article/menu-item-height-width/
Please keep it activate even if it doesn't work so we can see the issue.
Hi Leo,
I have enable it back.
Basically I would prefer something like the width screen version.
The logo to be smaller, but remains in the same left alignment,
while the menu changed to a toggle-menu and remains aligned to the right.
Hi there,
Give this CSS a shot:
.site-logo.mobile-header-logo img {
height: 100px;
}Thank you Tom.
This one looks much closer.
May I know how do I change the background color of this mobile-header,
and how do I add a border to this header?
I tried this but couldn't work
.site-header {
background-color: #f8fff8;
}
Try this:
@media (max-width: 768px) {
#mobile-header {
background-color: #000;
}
}Thank you.
This works perfectly.
No problem :)
