- This topic has 9 replies, 4 voices, and was last updated 3 years, 3 months ago by
Leo.
-
AuthorPosts
-
October 26, 2019 at 12:44 am #1044800
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.October 26, 2019 at 9:14 am #1045299David
StaffCustomer SupportHi 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/October 26, 2019 at 10:15 am #1045360Siong 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.October 26, 2019 at 10:49 am #1045375Leo
StaffCustomer SupportThat’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/October 26, 2019 at 6:46 pm #1045593Siong 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.October 27, 2019 at 9:21 am #1046101Tom
Lead DeveloperLead DeveloperHi 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-developmentOctober 27, 2019 at 10:15 am #1046129Siong 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;
}October 27, 2019 at 10:41 am #1046147Leo
StaffCustomer SupportTry this:
@media (max-width: 768px) { #mobile-header { background-color: #000; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 27, 2019 at 10:27 pm #1046391Siong Boon Lim
Thank you.
This works perfectly.October 28, 2019 at 8:15 am #1046906Leo
StaffCustomer SupportNo problem 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.