Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #698835

    Looking to have the hamburger icon changed to the word “Menu” with a border around it instead. I prefer the “NEW” hamburger menu overlay effect, but rather use an outline button with the text as “Menu” or “MENU.”

    Check the private content to see the site with the current menu as a hamburger icon.

    #699420

    Hello :)

    #700472

    Hi,

    Thank you for using Enfold.

    Please add this in the Quick CSS field:

    .av-hamburger-inner::before {
        content: "MENU";
    }
    
    .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
        background-color: transparent;
    }

    Best regards,
    Ismael

    #700570

    @Ismael Thank you! It worked.

    But the text is a little off grid.

    • This reply was modified 8 years ago by M|C.
    #701644

    Hi!

    Glad it worked. Please add this css code.

    .header_color .av-hamburger-inner {
        border: 2px solid;
        display: block;
        width: 60px;
        height: 30px;
    }
    
    .av-hamburger-inner::before {
        content: "MENU";
        left: 1px;
    }

    Adjust as necessary.

    Best regards,
    Ismael

    #795063

    This isn’t working for me… I’m not sure what to do. I even tried to add !important;

    #795068

    Hi,


    @sproutstudio
    You are currently using a very old version of the theme. Burger menu (you can see here – http://kriesi.at/themes/enfold-creative-studio/) is not available on the version you are using. If you would like to use it, please update Enfold to the latest version 4.0.7 – kriesi.at/documentation/enfold/updating-your-theme-files/ then please go to Enfold theme options > Header and choose to display menu items as icon – http://i.imgur.com/MqlKT49.png

    If you would like to apply the changes on mobile menu, please refer to this post – https://kriesi.at/support/topic/mobile-menu-smaller-height-with-logo-smaller/#post-700831.

    If that too does not help, please start a new thread under Enfold sub forum :)

    Best regards,
    Yigit

    #1016554

    Hi Enfold team,

    The code above didn’t work for me, instead I used this :
    ` .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special a:after {
    content: ‘MENU’;
    color: #000000;
    display: block;
    line-height: 10px;
    margin-top: 16px;
    font-size: 25px;
    border: solid 2px black;
    padding: 15px;
    }
    span.av-hamburger.av-hamburger–spin.av-js-hamburger {
    display:none!important;
    }’

    But the problem is how can I can I change the margin-top when the geader is scrolled (I already tried with .header_scrolled of course :)

    Can you help me ?

    Thanks,
    Clément

    #1016706
    #1016719

    Thanks you very much !! And feel a bit silly to haven’t be able to find it myself :/ You can close the topic !

    Thanks again,
    Clément

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Change "New" Hamburger Menu as Text Button’ is closed to new replies.