Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #885211

    I have currently set up to have my menu item display a ‘down arrow’ next to my menu item if there is a submenu. Rather, I’d like to display the ‘Burger Icon’ (the three lines) instead of the ‘down arrow’. Thanks for your time.

    #885474

    Hey Beth,

    So you are looking to replace the arrow with a burger icon?

    Best regards,
    Rikard

    #885722

    Yes, exactly.

    Thanks,
    Beth

    #886079

    Hi Beth,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    li#menu-item-33 a:after {
        content: ' \E811';
        font-family: 'entypo-fontello';
        font-size: 25px;
        font-weight: normal;
    }
    

    Best regards,
    Yigit

    #886164

    Sorry, that did not work. It dropped the menu item text down a few pixels, and added the burger icon after every submenu item. I have set up a user acct for you to login.

    This is the code I had originally used to produce the down arrow (which showed up perfectly), but the customer wants the burger icon instead of the arrow.

    .menu li > a:after { content: ‘ ▾’; }
    .menu li > a:only-child:after { content: ”; }

    • This reply was modified 7 years ago by cinchmedia.
    #886817

    Hi cinchmedia,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    #886848

    There is a mockup in my initial post within the private section. ‘Menu’ will have a dropdown associated with it, and I do not want the icon to appear next to the dropdown items.

    This is what I want to achieve:
    Here is what I want to achieve

    This is what the code above produced (‘Menu’ type dropped down a few pixels, and it added the icon to the dropdown menu items).
    The above code produced this.

    #886865

    Hi,
    I added this code in the General Styling > Quick CSS field:

    
    li#menu-item-56 a:after,li#menu-item-55 a:after,li#menu-item-57 a:after,li#menu-item-58 a:after {
        content: ' ';
    }

    Add it seems to be working, please check.
    2017-12-09_085351

    Best regards,
    Mike

    #886954

    Hi Mike… thank you. I added line-height: 100%; which brought the menu back to the proper line height. BUT, I have lost the ‘MENU’ item turning green upon hover. Do you have a snippet to add for that?

    Thanks!
    Beth

    #886961

    Hi,
    Try:

    .responsive #top #header .av-main-nav > li > a:hover {
        color: #8dc63f!important; 
    }

    Best regards,
    Mike

    #886963

    Hi Mike… sorry, that didn’t work.

    #886971

    Hi,
    Somehow the arrows in your snippet changed to >
    I fixed it, please check again.

    Best regards,
    Mike

    #888072

    That mostly fixed things, but the burger icon is still setting a few pixels higher than the menu items. Please look at my initial screenshot provided of what I need it to display as. Thank You.

    #888179

    Hi,

    Please add following code to Quick CSS as well

    li#menu-item-33 a:after {
        top: 2px;
        position: relative;
    }

    Best regards,
    Yigit

    #888299

    Perfect!! Thank you so much!

    #888303

    Hi,

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Yigit

Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Add Burger Icon next to menu item rather than the down arrow’ is closed to new replies.