[Resolved] Customize burger menu

Home Forums Support [Resolved] Customize burger menu

Home Forums Support Customize burger menu

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #524343
    Michael

    Hi.
    Currently don’t like the appearance of burger menu.
    How do remove the word menu,

    #524348
    Michael

    Hi.
    I currently don’t like the appearance of the burger menu.
    How do I;
    – Remove the word menu
    – instead of 3 lines make it into 2 lines.
    – X (close burger menu) to be larger and thin.

    Please kindly help.

    #524647
    Leo
    Staff
    Customer Support

    Hi there,

    https://docs.generatepress.com/article/mobile-menu-label/

    – You can change it with this CSS:

    .main-navigation .menu-toggle:before {
        content: '\f107';
    }

    Not sure if FA has two line hamburger though. You can check it here: https://fontawesome.com/icons?d=gallery

    – Can’t really change the thinkness unfortuantely as it’s an icon from FA. You can change the size like this:

    .main-navigation.toggled .menu-toggle:before {
        font-size: 20px;
    }
    #524709
    Michael

    Hi Leo

    1. The first code you provided is to remove word “menu” on responsive mode?

    2. Second code is two change the size of the hamburger menu?

    If I get css code for the hamburger menu that I want, I simply paste in the code to css?

    #525033
    Michael

    Hi Leo

    Thanks for sending the css codes, the first code you sent, removes the hamburger and left the word “menu”
    which I didn’t want.I’m sorry.

    What If, I want to remove GP hamburger and replace it with my own.

    Would you please kindly provide the css code to remove the existing hamburger, so I can add with my own css codes for the hamburger.

    Once removing existing GP hamburger, can I past the below css codes to simple css and do you think it will work? If you don’t mind just checking the css codes below to see if their fine, it includes animations.
    It will be appreciated if you can help.

    <!DOCTYPE html>
    <html>
    <head>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <style>
    div {
    width: 35px;
    height: 2px;
    background-color: white;
    margin: 6px 0;
    }
    </style>
    </head>
    <body>

    <p>A menu icon:</p>

    </body>
    </html>

    <!DOCTYPE html>
    <html>
    <head>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <style>
    .container {
    display: inline-block;
    cursor: pointer;
    }

    .bar1, .bar2, .bar3 {
    width: 35px;
    height: 2px;
    background-color: #222;
    margin: 6px 0;
    transition: 0.4s;
    }

    .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
    }

    .change .bar2 {opacity: 0;}

    .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    }
    </style>
    </head>
    <body>

    <p>Click on the Menu Icon to transform it to “X”:</p>

    <script>
    function myFunction(x) {
    x.classList.toggle(“change”);
    }
    </script>

    </body>
    </html>

    #525068
    Leo
    Staff
    Customer Support

    You had three questions in the list here:
    https://generatepress.com/forums/topic/customize-burger-menu/#post-524348

    And I answered them in order here:
    https://generatepress.com/forums/topic/customize-burger-menu/#post-524647

    I believe you missed the first answer which made the rest confusing.

    The code you provided above has more then just CSS and I’m not sure what they are supposed to do unfortunately.
    Simply pasting those in CSS won’t work.

    #525117
    Michael

    Sorry.

    They’re codes for creating a hamburger bar.

    #525349
    Leo
    Staff
    Customer Support

    Where did you get it from? Any instruction on how to use it?

    #525457
    Michael

    I got the source from here, but I don’t think it has instructions. It also comes with animation for the hamburger.
    https://www.w3schools.com/howto/howto_css_menu_icon.asp

    The links below is really what hope to have. The site has HTML,css and JavaScript for hamburger.

    https://codepen.io/JoseRosario/pen/BWqMwK

    The above link is from this site
    http://freefrontend.com/css-hamburger-menu-icons/

    If you are able to help install the hamburger from https://codepen.io/JoseRosario/pen/BWqMwK, it would be fantastic.

    #525619
    Tom
    Lead Developer
    Lead Developer
    #525799
    Michael

    Hi Tom & Leo

    Tom, I click the link you provided from your notes above.

    Just want to clarify. The codes below which I got from the link you provided (https://generatepress.com/forums/topic/custom-menu-toggle-hamburger/) will remove the current default hamburger completely which includes the word “menu” too, If I paste into snippet?

    add_action( ‘generate_inside_mobile_menu’, ‘tu_hamburger_icon’ );
    function tu_hamburger_icon() {
    ?>
    <span class=”hamburger-box”>
    <span class=”hamburger-inner”>Menu</span>
    </span>
    <?php
    }

    #525800
    Michael

    I simply want to remove the current default icon GP hamburger + menu(word) next to hamburger icon and replace it with custom hamburger icon, which mentioned 3 notes above.

    #525976
    Tom
    Lead Developer
    Lead Developer

    You can complete remove the GP mobile menu like this:

    .menu-toggle:before,
    .menu-toggle .mobile-menu {
        display: none;
    }

    Then to add your own HTML, do this:

    add_action( 'generate_inside_mobile_menu', 'tu_custom_mobile_menu' );
    function tu_custom_mobile_menu() {
    ?>
        Your HTML in here.
    <?php
    }

    I’m not sure if this will work with the specific HTML/CSS you have in mind, but it’s currently the only way to add your own HTML markup to the mobile menu.

    #525985
    Michael

    Hi, where should I paste your code, in snippet, hook or css?

    .menu-toggle:before,
    .menu-toggle .mobile-menu {
    display: none;
    }

    so after when I successfully remove GP hamburger.

    where should i past the html/css code?

    #526009
    Michael

    Hi.

    I managed to completely removed GP hamburger but I’m having problems using your second code.
    In simple CSS, I add the html into the slot where it says “Your HTML in here” but it doesn’t seem to work.

    your codes
    add_action( ‘generate_inside_mobile_menu’, ‘tu_custom_mobile_menu’ );
    function tu_custom_mobile_menu() {
    ?>
    Your HTML in here. (this is the part I’d entered the html)
    <?php
    }

    I’ve tried using the html provide from these site, but it didn’t work.

    https://codepen.io/JoseRosario/pen/BWqMwK
    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon

    I would some how like to use the hamburger and animation from https://codepen.io/JoseRosario/pen/BWqMwK

    If your willing to help, I would be gratefully appreciated.

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