Archived topic
Mobile header
27 replies · Started by Pare on June 6, 2017
Hmm there is a logo uploaded in Customizer > Site Identity?
The hamburger icon is an icon from FontAwesome. Are you looking to switch it out for something else?
Hi Leo
Yes there is a logo uploaded in Customizer > Site identity
Yes I'm looking to switch to something more light, less bold.
How can I switch ?
Hmm weird I can see the site logo in the source code.
Do you have the Header disabled in the Disable Elements on that page? https://docs.generatepress.com/article/disable-elements-overview/
You should be able to change the size of the hamburger icon by adjusting the menu item height:
https://docs.generatepress.com/article/menu-item-height-width/
The header is enabled on that page.
I would like to change the icon, the style is too ordinary.
How can I do that ?
You can make the icon an image if you like:
.menu-toggle:before {
content: url( "URL TO YOUR IMAGE" );
}
Otherwise you would have to include your own icon font library and use the unicode instead.
That works for mobile version only, desktop still the same icon. how change desktop icon also ?
Also have a clue why my logo on desktop doesn't appear ?
Thank's
Looks like the entire header element is gone and there's no option in GP for that.
Did you add any remove_action() function or edited the template file?
If not then can you try #1 on this page?
https://docs.generatepress.com/article/debugging-tips/
No i did not edit the template file,
I remember had merged header at some place but do not find this option back..
when I activate twenty seventeen theme i have this message, and some items show up, the logo shows up on white background.
Notice: Use of undefined constant GENERATE_VERSION - assumed 'GENERATE_VERSION' in /home/divirfvc/public_html/wp-content/plugins/gp-premium/sections/functions/generate-sections.php on line 69
Notice: Undefined variable: mobile_padding_left in /home/divirfvc/public_html/wp-content/plugins/gp-premium/sections/functions/generate-sections.php on line 210
Notice: Undefined variable: mobile_padding_right in /home/divirfvc/public_html/wp-content/plugins/gp-premium/sections/functions/generate-sections.php on line 210
For desktop:
.slideout-toggle a:before {
content: url( "URL TO YOUR IMAGE" );
}
As for the header - deactivating the theme won't help in this case. Did you try deactivating non-GP plugins?
Thank you, i desactivate plugin code snippets and the logo appeared correctly.
- Do you know how to fit the hamburger icon into the gray menu on top ? it's out of his place on desktop..
- Any idea how to add an image to the 'X' icon on desktop and mobile ?
Have you tried setting your navigation location to float right?: https://docs.generatepress.com/article/navigation-location/
This will allow you to change the X:
.main-navigation .menu-toggle.opened:before,
.slideout-toggle.opened a:before {
content: url( "URL TO YOUR IMAGE" );
}
Wow works great ! thank's a lot !
Very last question, i can't manage to center the height of the hamburger icon on mobile mode,
adding a padding-right worked but padding-top is just making the mobile navigation bar more tall..
here is the css :
.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle
padding-right: 50px;
Try this:
@media (max-width: 768px) {
.menu-toggle {
line-height: 50px;
padding-top: 25px;
}
}