Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • April 23, 2015 at 12:56 am #433182
    raslade

    Hi there, first of all – thank you for such a fantastic theme.

    I’m trying to customise the menu on my site by adding a custom icon to each item. I can embed the img via the WP Menus but need two more things which I can’t fix. 1) The icon needs to appear centred above the menu item 2) the icon only appears on the hover state.

    Are these options possible?

    Thanks
    Richard

    April 23, 2015 at 1:00 am #433184
    raslade

    Ignore number 1) fixed with .av-main-nav > li > a img {position: relative;top:-20px;left:40px}

    April 23, 2015 at 8:49 pm #433746
    Elliott

    Hi!

    I viewed your link but I do not see the icons in your menu that your referring to. Did you remove them?

    Regards,
    Elliott

    April 24, 2015 at 12:52 am #433827
    raslade

    Hi Elliott, sorry yes, I was testing a few different options today. Found a plugin that would do the trick called Nav Menu Images but alas looks like it doesn’t work with Enfold.

    Icon is back in now.
    Richard

    April 24, 2015 at 8:47 pm #434398
    Yigit

    Hey!

    Seems like you have already figured it out? Hovered on “Expertise” – http://i.imgur.com/5N619Pk.png

    Regards,
    Yigit

    April 24, 2015 at 9:53 pm #434480
    raslade

    Hi Yigit

    I’ve got no problem with adding an icon to the menu and the alignment is sorted now. However each menu item will have a different icon and I so I need them to only appear on the active and hover states.

    Thanks

    April 27, 2015 at 1:14 pm #435203
    Yigit

    Hi!

    Please add following code to Quick CSS 

    li > a > .avia-menu-text img {
  opacity: 0;
}
li.current_page_item > a > .avia-menu-text img {
  opacity: 1!important;
}

    You may need to recreate your menu as you have menu items twice and half of them are hidden – http://i.imgur.com/USrzpP0.png

    Cheers!
    Yigit

    April 27, 2015 at 2:04 pm #435241
    raslade

    Hi Yigit

    Thanks for that. I’ve done as you suggested but alas it’s still not working. Any more ideas?

    Thanks

    April 28, 2015 at 1:09 pm #435986
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    li.current-menu-item > a > .avia-menu-text img {
  opacity: 1!important;
}

    Best regards,
    Yigit

    April 28, 2015 at 2:18 pm #436017
    raslade

    Yigit

    Perfect thank you. A few more tweaks to the code and looking much better.

    li > a img {position: relative;top:-20px;left:60px}
li > a > .avia-menu-text img {opacity: 0!important;}
li > a:hover > .avia-menu-text {color: #b7d333 !important;}
li > a:hover > .avia-menu-text img {opacity: 1!important;}
li > a > .avia-menu-text {color: #666666 !important;}
li.current-menu-item > a > .avia-menu-text img {opacity: 1!important;}
li.current-menu-item > a > .avia-menu-text {color: #b7d333 !important;}

    My last question (promise) is their seems to be some padding creeping in but I can’t figure out where from?

    Thanks

    April 28, 2015 at 2:27 pm #436026
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    li > a > .avia-menu-text img {
  position: absolute;
  top: 0px;
  left: 5px;
}

    Best regards,
    Yigit

    April 28, 2015 at 2:51 pm #436052
    raslade

    Spot on thank you for all your help on this one.

    April 28, 2015 at 3:16 pm #436086
    Yigit

    Hey!

    You are welcome, we are always happy to help :)
    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 post them here on the forum and we will gladly try to help you :)

    Cheers!
    Yigit

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Different custom icon for each menu item’ is closed to new replies.