Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • December 5, 2017 at 7:59 pm #885211
    cinchmedia

    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.

    December 6, 2017 at 10:52 am #885474
    Rikard

    Hey Beth,

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

    Best regards,
    Rikard

    December 6, 2017 at 6:43 pm #885722
    cinchmedia

    Yes, exactly.

    Thanks,
    Beth

    December 7, 2017 at 1:40 pm #886079
    Yigit

    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

    December 7, 2017 at 4:59 pm #886164
    cinchmedia

    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 6 years, 11 months ago by cinchmedia.
    December 9, 2017 at 1:58 pm #886817
    Victoria

    Hi cinchmedia,

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

    Best regards,
    Victoria

    December 9, 2017 at 3:08 pm #886848
    cinchmedia

    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.

    December 9, 2017 at 3:55 pm #886865
    Mike

    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

    December 9, 2017 at 7:50 pm #886954
    cinchmedia

    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

    December 9, 2017 at 8:10 pm #886961
    Mike

    Hi,
    Try:

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

    Best regards,
    Mike

    December 9, 2017 at 8:21 pm #886963
    cinchmedia

    Hi Mike… sorry, that didn’t work.

    December 9, 2017 at 8:49 pm #886971
    Mike

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

    Best regards,
    Mike

    December 12, 2017 at 9:36 pm #888072
    cinchmedia

    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.

    December 13, 2017 at 1:53 am #888179
    Yigit

    Hi,

    Please add following code to Quick CSS as well

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

    Best regards,
    Yigit

    December 13, 2017 at 12:59 pm #888299
    cinchmedia

    Perfect!! Thank you so much!

    December 13, 2017 at 1:08 pm #888303
    Yigit

    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

  • Author
    Posts
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.