Archived topic
Mobile Header
6 replies · Started by Jana on June 19, 2019
I'm having 2 issues w/Modile Header
1) I'm premium but I don't have a breakpoint on my menu (see below)
2) I know that 'the height of the logo is determined by the menu item height option with mobile toggle activated" but when I make the mobile header big enough to read, say 60px, it makes the main navigation too stretched out and long (I have pics but no place to attache them).
Also, I'm not able to update my premium plugin.
Thanks, Jana
Hi there,
Let's solve the updating problem first.
Are you getting any specific errors?
https://docs.generatepress.com/article/updating-issues/
Let me know :)
Thanks, that worked great - now just the other mobile header questions.
1) I assume this option is now available since you've updated the premium plugin? Should be under Customizer > Layout > Primary Navigation:
https://www.screencast.com/t/JjLnnSpnTnOS
2) Try this solution:
https://generatepress.com/forums/topic/menu-item-width/#post-596935
Let me know :)
I've changed my mobile menu height here:
> Layout > Primary Navigation > Menu Item Height > 90 for desktop / 25 for desktop & phone
Then I cut/pasted this into CSS (it's the only code there):
@media (max-width: 768px) {
.mobile-header-navigation .site-logo.mobile-header-logo img {
height: 108px;
}
.menu-toggle, .main-navigation .mobile-bar-items a {
line-height: 108px;
}
}
And the mobile logo is still miniscule and tied to the mobile nav height.
Ok - it DID work! Now I just have to move the logo down since part of it is not showing at the top.
Also, is there a way to get my main header that's on the desktop version to show in the mobile version, but just smaller?
Thanks, Jana
Add this as well:
@media (max-width: 768px) {
.navigation-branding img, .site-logo.mobile-header-logo {
height: 108px;
}
}
Let me know :)