[Resolved] Trouble align Logo & Toggle-Menu on my mobile version.

[Siong Boon Lim]

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.

http://www.cable-tester.com/

[David]

Hi there,

enable the Mobile Header Option:

https://docs.generatepress.com/article/mobile-header/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Siong Boon Lim]

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.

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Siong Boon Lim]

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.

[Tom]

Hi there,

Give this CSS a shot:

.site-logo.mobile-header-logo img {
    height: 100px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Siong Boon Lim]

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;
}

[Leo]

Try this:

@media (max-width: 768px) {
    #mobile-header {
        background-color: #000;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Siong Boon Lim]

Thank you.
This works perfectly.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts