[Support request] change hamburger icon whit image

Home Forums Support [Support request] change hamburger icon whit image

Home Forums Support change hamburger icon whit image

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #704795
    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?

    #705028
    David
    Staff
    Customer Support

    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/

    #705030
    Daniele

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

    #705059
    David
    Staff
    Customer Support

    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.

    #705229
    Daniele

    type this site https://schulzitalia.com

    #705258
    David
    Staff
    Customer Support

    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/

    #705274
    Daniele

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

    #705289
    David
    Staff
    Customer Support

    This CSS should get you started.

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

    Great!! Tank you so much

    #705295
    Daniele

    but it does not work

    #705296
    David
    Staff
    Customer Support

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

    #705323
    Daniele

    ok

    #705389
    David
    Staff
    Customer Support

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

    #705656
    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.

    #705778
    David
    Staff
    Customer Support

    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%;
    }
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.