Tagged: 

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • June 8, 2015 at 7:51 pm #456310
    gearouthere

    Hi and thanks for your wonderful theme again! We are working on making our site unique and were wondering if it was possible to have icons in the main menu above the words? Would there be any css we would need to add?

    Thanks,
    Gear Out Here

    June 8, 2015 at 10:04 pm #456352
    Elliott

    Hey gearouthere!

    See Josue’s post here, https://kriesi.at/support/topic/sort-buttons/#post-397212.

    You could use some CSS like this.

    #menu-item-5672 > a::before {
  content: "\e824";
  font-family: entypo-fontello;
}

    Regards,
    Elliott

    • This reply was modified 9 years, 5 months ago by Elliott.
    July 16, 2015 at 1:08 am #474036
    gearouthere

    Hi Elliott, thank you! An additional question to this: what if we were trying to make icons only appear on mouse over on the menu word and instead of the word. So there would be just words in the main menu, but once you mouse over it, it turns into an icon. Would that be possible?

    Thank you,
    Gear Out Here

    July 16, 2015 at 2:08 pm #474296
    Yigit

    Hey!

    Please apply the changes and then let us know.

    Best regards,
    Yigit

    July 16, 2015 at 11:37 pm #474601
    gearouthere

    Hi Yigit, thank you! I think you forgot to type the changes themselves…

    July 17, 2015 at 2:09 pm #474945
    Yigit

    Hey!

    Please use the code as following 

    #menu-item-3436 > a::before {
  content: "\e824";
  font-family: entypo-fontello;
opacity: 0;
}
#menu-item-3436:hover > a::before { opacity: 1; }
#menu-item-3436:hover > a >.avia-menu-text { opacity: 0; }

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field

    Cheers!
    Yigit

    July 18, 2015 at 4:51 pm #475283
    gearouthere

    Hi Yigit, thanks! it seems to work! one question here, is it possible for me to use custom icons (maybe my own png images) instead of the theme icons? how would I do that?

    Thanks so much!

    Gear Out Here

    July 20, 2015 at 4:42 pm #475930
    Yigit

    Hey!

    You can change the code to following one

    #menu-item-3436:hover > a {
  background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; 
}
#menu-item-3436:hover > a >.avia-menu-text { opacity: 0; }

    Regards,
    Yigit

    July 21, 2015 at 9:50 pm #476735
    gearouthere

    Hi Yigit, thank you! So I used only this code:

    #menu-item-5672:hover > a {background-image: url(https://aquaquestonline.com/wp-content/uploads/2015/07/bp.png); background-size: contain; background-repeat: no-repeat;background-position: 50% 50%; }
    #menu-item-5672:hover > a >.avia-menu-text { opacity: 0; }

    (without the upper part that went like this: #menu-item-3436 > a::before {
    content: “\e824”;
    font-family: entypo-fontello;
    opacity: 0;
    })

    I got the menu word to disappear (see https://aquaquestonline.com/ -> “Backpacks” – this is the menu item I applied the code to). But the icon doesn’t appear for some reason. I think I might be missing some small step?

    Thanks for your help!!

    July 24, 2015 at 7:16 pm #478349
    Yigit

    Hey!

    Sorry for the late reply!

    Icon is actually visible but your icon is white so white on white = not easily visible :)
    Please change the color of your icon or background color of your menu items on hover by editing “Main menu links” in Enfold theme options > Advanced Styling.

    Also, please change “background-size: contain;” to “background-size: inherit;” in the code i posted here

    Regards,
    Yigit

    July 24, 2015 at 7:43 pm #478359
    gearouthere

    Hi Yigit,

    thank you! The size works perfect now. The only thing is: I only see the icon when I scroll the page down. I actually do see it on white, but when the menu is above the slider, I don’t. I feel like we are missing a tiny step here..

    Thank you!

    Gear Out Here

    July 24, 2015 at 7:48 pm #478362
    Yigit

    Hey!

    Please change your code to following and add !important rule
    [see private content field]

    Cheers!
    Yigit

    July 24, 2015 at 7:55 pm #478365
    gearouthere

    Hi Yigit, thank you very much! Now it’s all working! I was wondering also if somebody has looked into this issue here with our front page slider – would you know? https://kriesi.at/support/topic/issues-with-front-page-slider/#post-476884

    Thank you,
    Gear Out Here

    July 27, 2015 at 3:33 pm #479112
    Yigit

    Hey Gear Out Here!

    Ismael already replied to you – https://kriesi.at/support/topic/issues-with-front-page-slider/#post-478551
    You are welcome, glad we could help. Let us know if you have any other questions or issues

    Best regards,
    Yigit

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Icons in the main menu’ is closed to new replies.