Help with Menu

  • Resolved sigmas55

    (@sigmas55)


    3 years, 7 months ago

    Hi guys,

    Love the new Kadence theme, thanks for creating it guys.

    I recently added a second language to my site, the language changer (located along navigation bar as part of main menu) is showing the name of the language and I like to replace it with a globe icon, I created a custom link menu item (named it “Language” temporarily) and looking for a way to add the globe icon here in stead of “Language”, this way language changer takes less space in my primary navigation and breaks its routine style.

    Any suggestions?

    • This topic was modified 3 years, 7 months ago by sigmas55.
Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello,

    Thank you for reaching out.

    The Ultimate Menu feature of the Kadence Pro addon will let you add icons to the menu items and hide their label texts. Here’s a screen recording for your reference – https://share.getcloudapp.com/Qwu5vRAo.

    If you do not have the pro addon, you may be able to do a workaround using custom CSS code. However, we’ll need to have a look at your webpage to help you with it.

    Hope this helps and let us know if we can assist you further.

    Regards,
    Karla

    Thread Starter sigmas55

    (@sigmas55)

    Hi Karla,

    Appreciate your reply.

    Unfortunately i don’t have the pro menu addon, trying to keep menu as simple as possible, if you can help me me with a css code i’ll appreciate it.

    Here is the website, still a staging one:

    https://staging30.store.supercare.ps

    Thanks

    Hello,

    You can use this custom CSS code:

    li#menu-item-2023 {
    height: 30px;
}
li#menu-item-2023>a {
    height: 100%;
}
li#menu-item-2023>a::before {
    content: "";
    display: block;
    background: url(https://cdn.weglot.com/flags/circle/gb.svg) no-repeat;
    background-size: contain;
    width: 40px;
    height: 20px;
    position: relative;
    left: 0;
    top: .25rem
}

li#menu-item-2023 .kadence-svg-iconset.svg-baseline svg {
    top: -2px;
}

    Edit the menu label in Appearance > Menus to have space only instead of “Languages”. Kindly edit the background URL to the correct image you’ll be using. Here’s how it will look – https://share.getcloudapp.com/NQuYkkjy.

    Hope this helps.

    Best regards,
    Karla

    Thread Starter sigmas55

    (@sigmas55)

    Thank you so much Karla, this solved the issue for me.

    Appreciate your help

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Help with Menu’ is closed to new replies.