Home Forums Weaver Xtreme Theme how to add icons to menu items

Topic Resolution: Resolved

This topic contains 7 replies, has 3 voices, and was last updated by  MikeDrum 3 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #49824

    mafgirl
    Participant

    Hi everyone!

    I’m working on my husband’s website, I’m trying to achieve a look like the below photoshop example, where

    a) the logo and menu are aligned

    b) the menu has added icons that ideally change hover colour with the menu items (I have images for both colours)

    How to achieve this in weaver xtreme please?

    Thank you 🙂

     

    website example

     

    #49832

    scrambler
    Moderator

    You can use WordPress site logo for the logo on the left of the menu. Read the article below about it

    https://guide.weavertheme.com/how-to-using-the-site-logo/

    To have menu items that have icons, you need to create your menu using WordPress Custom Menus in Appearance > Menu.

    Then it is simply a matter of replacing the Menu item label by any HTML you want that will container both an icon and text below it.

     

    #49922

    mafgirl
    Participant

    @scrambler Thank you! That was so easy, I never knew that was possible! I don’t suppose you would know how to code in a different image (colour) on hover? It’s probably not possible/too complicated, but I thought I’d ask 🙂

     

    #49926

    scrambler
    Moderator

    There are various ways to do that. The one below would use two images for each menu item, one for the default icon, and one for the Hover icon.
    Then CSS rules placed in the Theme Global CSS Rule box will hide the Hover image by default, and unhide it when hovering

    All the menu items main icon mage should use the same “myitem” class, and all menu item Hover icon image the same “myhover” class
    The first rule is only needed if all icon images do not have the same exact size. If they do you can skip it.

    HTML for each menu item:
    <img class=”myitem” src=”Image1Url” /><img class=”myhover” src=”HoverImageUrl” />

    CSS for the Global Custom CSS Rule box:
    .myitem, .myhover {height:40px !important;width:40px !important;}
    .myhover {display:none;}
    li:hover .myitem {display:none;}
    li:hover .myhover {display:block;}

     

    #49927

    mafgirl
    Participant

    @scrambler Thanks so much! That looks straightforward, I’m going to try that 🙂
    Can the hover image be used for the current page too? thank you 🙂

    #49929

    scrambler
    Moderator

    Yes modify the rules like below

    .myitem, .myhover {height:40px !important;width:40px !important;}
    .myhover {display:none;}
    li:hover .myitem, li.current-menu-item .myitem {display:none;}
    li:hover .myhover, li.current-menu-item .myhover {display:block;}

    #61926

    MikeDrum
    Participant

    Hi, I figured it out sorry!

    #61928

    MikeDrum
    Participant

    Sorted it. It looks like the “” was coming out different when I pasted it, typed those in manually and it worked.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.