Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 5, 2021 at 6:11 pm #1314703
    force-media

    Hi Guys,

    Hope you are doin well.

    I am currently need support to create a custom burger menu. The menu needs to have 3 levels, where second one may includes font-icons from icomoon. I did already download both, the icon files and the icon font. Furthermore the menu needs to have an arrow on right beside the menu item, which should rotate -90deg on click. I thought already about to use IKS menu Plugin, but it allows only to implement their menus by using a shortcode or widget.

    Would be great if you could give me a hint how to move forward.

    A mockup of how the menu should look like and current URL was added to private content section.

    I appreciate your help on this.

    Thanks,
    Frank

    August 7, 2021 at 9:15 pm #1315059
    Mike

    Hey Frank,
    Thank you for your patience, please see our menu documentation here, to have a submenu on click please go to your theme options at: Enfold ▸ Main Menu ▸ Burger/Mobile menu ▸ Menu Icon Submenu items and choose Display submenu on click
    With this option, the top-level items are duplicated so you will need to adjust your menu items for your layout.
    You will also find other tips such as adding the icons and the active state of the items, but your mockup looks pretty ambitious and I’m not sure how exact it can be reproduced. Is this mockup from a working menu created with the plugin?
    Perhaps if the menu was added to the page via the shortcode you talked about it could then be moved into place with jQuery on page load, would this be the only menu full time or only on mobile?

    Best regards,
    Mike

    August 9, 2021 at 10:10 am #1315802
    force-media

    Hey Mike,

    Thanks for your response.

    Let’s go away from the plugin. I am gonna ask my question a bit more precise. Is it possible to add other icons instead from font-family ‘entypo-fontello’ in front of a burger menu item. Right now it displays the ‘avia-bullet’ css class, but i would to show a custom icon instead. The icon i have is from icomoon.io, i do have this both either as font-family or as .png / .svg file.

    Best regards,
    Frank

    August 9, 2021 at 2:32 pm #1315857
    Mike

    Hi,
    Thanks for the feedback you can do that this way:

    #top .avia-bullet {
    border: none;
    padding:0;
    margin: 0 10px 0 0!important;    
}
#top .avia-bullet:before {
    content: "\e812";
    font-family: 'entypo-fontello';    
    font-size:11px;
    line-height:1em;
    position:absolute;
    top:10px;
    left:-3px;
}

    this example replaces the arrow with a check mark, just replace the font-family & font code with yours.
    If you wish to use an image instead just replace the font & content with a content url, for example:
    content: url(https://img.icons8.com/officel/40/000000/plus-math.png);
    and then adjust your size & position to suit.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.