[Support request] change hamburger icon whit image

[Daniele]

Hello everyone, I need to build a menu that has only an image and that opens (dropdown) to the passage of the mouse. It must remain fixed in the upper right corner on all devices. I thought a solution could be to just change the hamburger icon whit a image, but it only works on the desktop and not very well. How can I do?

[David]

Hi there,

need a bit more info –
is it a custom image or a different icon for the hamburger?
will the menu drop down on hover or on-click?
the hamburger remains fixed in the corner? Like:
https://gpsites.co/volume/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniele]

is a custom image
the menu will go down when you mouse or click-click
the hamburger stays fixed in the corner

[David]

OK, gonna take some work, before hand do you have an example site or an image you could share? This way i don’t provide how to do something and it turns out wrong.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniele]

type this site https://schulzitalia.com

[David]

You can start with the GP Slideout Navigation. This article explains how to use that and set it so it is the only menu on desktop:

https://docs.generatepress.com/article/activating-slide-out-navigation/

The other full screen styling would need some CSS. And the block layout menu would take custom development.

You can also use the Sticky nav so the menu bar is always present:

https://docs.generatepress.com/article/sticky-navigation/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniele]

Tks for reply. I had arrived there alone. But how do I replace the hamburger icon with a png file?

[David]

This CSS should get you started.

.slideout-toggle a:before {
    content: url('url_to_my.png') !important;
    width: auto !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniele]

Great!! Tank you so much

[Daniele]

but it does not work

[David]

Can you provide a link to the site. You can edit the original topic and use the Site URL field for privacy

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniele]

ok

[David]

I updated the code above. You may want to define your own width properties.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniele]

the image is now substituted for the icon but passing over it with the mouse only a clickable rectangle appears (not the inserted image). When you open the slideout is empty, there is no menu. if I remove the css code everything returns to work properly.

[David]

So the width statement needed important, so updated code here

You can change the background hove color for the Primary navigation to transparent to remove the menu block showing when hovered

The menu is missing because of this CSS:

.main-navigation.offside {
	width: 100%;
	left: -100%;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts