[Resolved] reposition hamburger menu

Home Forums Support reposition hamburger menu

  • This topic has 23 replies, 5 voices, and was last updated 1 week ago by Gabriela.
Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #1537106
    ken

    Hi there,

    I am trying to move the hamburger menu and restyle it (thicker lines, change the color and shape and add the word menu beside it). Can you help me out on that? Here is the site.

    Thanks!

    #1537909
    Leo
    Staff
    Customer Support

    Hi there,

    I’m not seeing a site linked.

    Can you provide it using the private info field?

    Thanks 🙂

    #1537916
    ken
    #1537947
    Leo
    Staff
    Customer Support

    You can’t really change the line thickness but you can change the size if that helps:

    #mobile-header .gp-icon.icon-menu-bars {
        font-size: 28px;
        color: #000;
    }

    The text can be added using the label option in the customizer:
    https://docs.generatepress.com/article/mobile-menu-label/

    #1537951
    ken

    Changing the size is fine and the label seems to work as well. However, the color can’t be set in the default settings and I would also like to move both the hamburger and the menu to the left instead of the right.

    #1537952
    Leo
    Staff
    Customer Support

    Not sure if fully understand but try this CSS:

    #mobile-header.main-navigation .inside-navigation {
        justify-content: flex-start;
    }
    #1537958
    ken

    that was able to move the hamburger to the right side, what I need now is that both the menu label and hamburger to have the same color and also that they are vertically aligned and center of the whole sticky navigation. It’s currently slightly on the upper part of the navigation.

    #1537966
    Leo
    Staff
    Customer Support

    Try this:

    .gp-icon.icon-menu-bars svg {
        top: .28em;
    }
    .menu-toggle .mobile-menu {
        color: #000000;
    }
    #1538136
    ken

    it works, thanks!

    #1538266
    Leo
    Staff
    Customer Support
    #1721433
    Gabriela

    Hi,
    Is it possible to have a custom svg image for hamburger? And how to align it vertically centered, set padding to it and transparent background?

    #1721443
    Elvin
    Staff
    Customer Support

    Hi Gabriela,

    Sure you can but you’ll need a child theme’s functions.php or Code Snippets plugin as we’ll need the filter generate_svg_icon to apply the change.

    add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
    		$output = 'your <svg>..</svg> here';
    	}
    }15,2);

    A wise man once said:
    "Have you cleared your cache?"

    #1722519
    Gabriela

    Hi Elvin!
    This function is returning me a critical error to the site!

    This is what I have put in my child’s functions.php:

    add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
    		$output = 'your <svg>http://localhost/salatherigathazazen/wp-content/uploads/2021/04/salatherigathazazen-hamburguer.svg</svg> here';
    	}
    }15,2);
    #1722521
    Leo
    Staff
    Customer Support

    You need to replace this part in Elvin’s code:
    your <svg>..</svg> here

    With the HTML of the SVG icon and not the link to the SVG file in your media library.

    #1722532
    Gabriela

    Please, where do I find the HTML of the SVG icon?
    I use “Safe SVG” plugin. Even so?
    When I deploy the site to the www server, will it recognize?

Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.