Renew: Is any possible to mack 5 menu button has 5 different color?

Support
#1

Hello there,

First, thanks for this amazing tool!
Second, i would like to ask Is any way can make 5 menu button has 5 different hover color? like https://www.thesimpledollar.com/ menu?

thanks.

#2

Hello There,

Thanks for writing in! You can achieve to make 5 menu button has 5 different hover color using a custom css. You can make use of this custom css in the X > Theme Options > Global CSS (http://prntscr.com/evui3r) as an example for your to accomplish what you have in mind.

/* menu item 1 */
.x-navbar .desktop .x-nav > .menu-item-121 > a{
    color: red;
}

.x-navbar .desktop .x-nav > .menu-item-121 > a:hover{
    color: green;
}

.x-navbar .desktop .x-nav > .menu-item-121 > a:hover > span {
    box-shadow: 0 2px 0 0 green;
}

/* menu item 2 */
.x-navbar .desktop .x-nav > .menu-item-4611 > a{
    color: blue;
}

.x-navbar .desktop .x-nav > .menu-item-4611 > a:hover{
    color: red;
}

.x-navbar .desktop .x-nav > .menu-item-4611 > a:hover > span {
    box-shadow: 0 2px 0 0 red;
}

The code above is only good for two menu items. You can continue to replicate it and change the necessary menu item ID to make it work. If you want to know how I got the menu item IDs, please check out this link: https://wpsites.net/tools/find-nav-menu-item-i-d/

Hope this helps.

#3

It’s work!
Thank you so much!

Can i also ask you how to do the recent post area and how to make box outline has a little a bit shadow? just the the simple doller website?

#4

Hi there,

Please try this:

.x-recent-posts a {
    -webkit-box-shadow: 0 2px 40px rgba(0,0,0,.13);
    box-shadow: 0 2px 40px rgba(0,0,0,.13);
}

Here are some reference links related to the suggestions above:

Hope this helps.

#5

Thank you so much!

#6

You are most welcome. :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.