[Support request] Mobile header

[Leo]

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?

[Pare]

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 ?

[Leo]

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/

[Pare]

The header is enabled on that page.

I would like to change the icon, the style is too ordinary.
How can I do that ?

[Tom]

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.

[Pare]

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

[Leo]

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/

[Pare]

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

[Tom]

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?

[Pare]

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 ?

[Tom]

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

[Pare]

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;

[Leo]

Try this:

@media (max-width: 768px) {
    .menu-toggle {
        line-height: 50px;
        padding-top: 25px;
    }
}

[Author]

Posts