Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 13, 2016 at 4:24 pm #698835
    M|C

    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.

    October 16, 2016 at 12:10 am #699420
    M|C

    Hello :)

    October 18, 2016 at 9:05 am #700472
    Ismael

    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

    October 18, 2016 at 11:06 am #700570
    M|C

    @Ismael Thank you! It worked.

    But the text is a little off grid.

    • This reply was modified 8 years ago by M|C.
    October 20, 2016 at 6:26 am #701644
    Ismael

    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

    May 17, 2017 at 8:15 pm #795063
    sproutstudio

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

    May 17, 2017 at 8:21 pm #795068
    Yigit

    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

    October 1, 2018 at 11:02 am #1016554
    Blue_Bear

    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

    October 1, 2018 at 6:25 pm #1016706
    Yigit

    Hi,


    @Blue_Bear     Please refer to this post – https://kriesi.at/documentation/enfold/menu/#display-the-word-menu-next-to-hamburger-menu-icon :)

    Best regards,
    Yigit

    October 1, 2018 at 7:03 pm #1016719
    Blue_Bear

    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

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