Archived topic
Custom Header
5 replies · Started by Shahzad on January 3, 2021
I'm in the process of migrating my existing site to the Generate Press theme, and am having some issues recreating the original header design in mobile in GP.
Just FYI I am not a developer but have some basic familiarity with CSS.
This link has the before and after comparison and documents the changes I'd like to make:
https://www.screencast.com/t/kJgeebve7dO
You can compare the headers by viewing mobile on the live site:
vs. the staging site:
https://staging2.internationalfit.org/
As with the original design, I want to maintain the header's stickyness in mobile.
Thanks in advance for you help,
Shahzad
Hi,
You can try this CSS:
#mobile-header button.menu-toggle {
order: 0;
}
#mobile-header .mobile-header-logo {
order: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#mobile-header .menu-bar-items {
order: 2;
}This is how it would look like: https://share.getcloudapp.com/OAuWN0wK
If you want to adjust the space between the icons, you can try adjusting it on Appearance > Customize > Layout and set Menu Item Width.
Thank you very much, that helped.
There's an additional issue that's occurring now. When opening the nav, the logo appears on top of the menu items.
See screenshot here:
https://www.screencast.com/t/nrr8yPCP
Thanks in advance for your help,
Shahzad
Replace the CSS properties of the #mobile-header .mobile-header-logo{...} selector into this.
#mobile-header .mobile-header-logo {
order: 1;
position: absolute;
top: 0;
left: 43%;
transform: translate(-50%, 0%);
}This is how it will behave once applied properly: https://share.getcloudapp.com/nOuD7J0W
Excellent. That worked. Thank you!
Nice one. No problem. :D
