Docs

[Andreas Bjerve]

Hi, I want a different color, and matching hover color, for each of the links in my NAV bar. The idea is that each link will match a color in my logo (red, green, yellow, purple).

I hope this is possible! 🙂

Thanks for continued awesome assistance from you guys!

[Andreas Bjerve]

This reply has been marked as private.

[Andreas Bjerve]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

li#menu-item-210 a {
    color: #3eb54a;
}
li#menu-item-210 a:hover {
    color: #e9b81f;
}

li#menu-item-166 a {
    color: #f26987;
}
li#menu-item-166 a:hover {
    color: #e9b81f;
}

li#menu-item-167 a {
    color: #6e5ba7;
}
li#menu-item-167 a:hover {
    color: #e9b81f;
}

li#menu-item-168 a {
    color: #e9b81f;
}
li#menu-item-168 a:hover {
    color: #e9b81f;
}

Change the colors and hover colors as per your need. Let us know how this goes!

[Andreas Bjerve]

This is just perfect!:D

Now, how do I also color that small top hover-line above the NAVbar links (which is now grey)?

[Prasant Rai]

Hello Andreas,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.x-nav-wrap.desktop li a:hover {
    box-shadow: inset 0 4px 0 0 #e9b81f !important;
}

Thanks.

[Andreas Bjerve]

Ok – really great!

A last detail however: I want that hover-line (box-shadow?) to have the same hover color as each of the links. (So when I click e.g. “Contact”, which has a purple hover-color, that hover-line on top will also turn purple). So, four different colors, one for each of the links.

Thanks! 🙂

[Christopher]

Hi there,

Please update following code :

li#menu-item-210 a:hover {
    color: #f26987;
}
li#menu-item-167 a:hover {
    color: #3eb54a;
}

li#menu-item-168 a:hover {
    color: #6e5ba7;
}

To:

li#menu-item-210 a:hover {
    color: #f26987;
    box-shadow: inset 0 4px 0 0 #f26987 !important;
}
li#menu-item-167 a:hover {
    color: #3eb54a;
    box-shadow: inset 0 4px 0 0 #3eb54a !Important;
}

li#menu-item-168 a:hover {
    color: #6e5ba7;
    box-shadow: inset 0 4px 0 0 #6e5ba7 !important;
}

Hope it helps.

[Andreas Bjerve]

Thanks! Exactly as I wanted. Great stuff! 😀

[Thai]

If you need anything else please let us know.

[Andreas Bjerve]

Hi there! A last little detail on this topic:

I´d like to be able to change the colors of the navbar-link “box shadow” (not sure wether that´s the name for it; that line over the navbar links) when it it selected. It´s grey now, once you´ve navigated to the selected page. I want different colors for each.

Thanks!

[Andreas Bjerve]

This reply has been marked as private.

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

/*contact*/
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-168 > a {box-shadow: inset 0 4px 0 0 #6e5ba7;}
/*blog*/
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-167 > a {box-shadow: inset 0 4px 0 0 #3eb54a;}
/*about*/
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-166 > a {box-shadow: inset 0 5px 0 0 #e9b81f;}
/*services*/
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-210 > a {box-shadow: inset 0 4px 0 0 #f26987;}

Hope it helps, Cheers!

[Andreas Bjerve]

Perfect! Thanks!
🙂

[Rue Nel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts