-
AuthorPosts
-
October 13, 2016 at 4:24 pm #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.
October 16, 2016 at 12:10 am #699420Hello :)
October 18, 2016 at 9:05 am #700472Hi,
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,
IsmaelOctober 18, 2016 at 11:06 am #700570October 20, 2016 at 6:26 am #701644Hi!
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,
IsmaelMay 17, 2017 at 8:15 pm #795063This 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 #795068Hi,
@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.pngIf 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,
YigitOctober 1, 2018 at 11:02 am #1016554Hi 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émentOctober 1, 2018 at 6:25 pm #1016706Hi,
@Blue_Bear Please refer to this post – https://kriesi.at/documentation/enfold/menu/#display-the-word-menu-next-to-hamburger-menu-icon :)Best regards,
YigitOctober 1, 2018 at 7:03 pm #1016719Thanks 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 -
AuthorPosts
- The topic ‘Change "New" Hamburger Menu as Text Button’ is closed to new replies.