Docs

[jsjmccracken]

Hello,

On http://www.tablerockkennels.com/ how do I change the hover color for each page in the navbar? Right now the hover effect for every page is green but I would like to know how to change the hover effect for each page to a different color if desired.

Thank you!

Jacob

[Paul R]

Hi Jacob,

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

/* Home */
.x-navbar .desktop .x-nav > li.menu-item-275 > a:hover,
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-275 > a {
       color:red;
}
/* Puppies */
.x-navbar .desktop .x-nav > li.menu-item-34 > a:hover,
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-34 > a {
       color:red;
}

/* Shipping */
.x-navbar .desktop .x-nav > li.menu-item-221 > a:hover,
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-221 > a {
       color:red;
}

/* Our Girls */
.x-navbar .desktop .x-nav > li.menu-item-30 > a:hover,
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-30 > a {
       color:red;
}

/* Studs */
.x-navbar .desktop .x-nav > li.menu-item-31 > a:hover,
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-31 > a {
       color:red;
}

/* Videos */
.x-navbar .desktop .x-nav > li.menu-item-32 > a:hover,
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-32 > a {
       color:red;
}

/* Contact */
.x-navbar .desktop .x-nav > li.menu-item-33 > a:hover,
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-33 > a {
       color:red;
}

Change red with the color that you like.

Hope that helps.

[jsjmccracken]

Thank you! This is perfect 🙂

[jsjmccracken]

Actually…

I thought the code to change the footer would be to replace .x-navbar with .x-colophon-bottom but that didn’t work. How do I do the same thing for the footer menu as well as change it to lower case?

Thank you!

[Joao]

Hi there

Please try using the following code

.x-colophon.bottom .x-nav li.menu-item-34   > a {
       color:green;
}

.x-colophon.bottom .x-nav li.menu-item-221   > a {
       color:green;
}

.x-colophon.bottom .x-nav li.menu-item-30   > a {
       color:green;
}

.x-colophon.bottom .x-nav li.menu-item-31   > a {
       color:green;
}

.x-colophon.bottom .x-nav li.menu-item-32   > a {
       color:green;
}

.x-colophon.bottom .x-nav li.menu-item-33   > a {
       color:green;
}

Just substitute green for your valoride color like Red or #ffffff

Hope that helps!

Thanks,

Joao

[jsjmccracken]

The hover effect is working great, thank you!

How do I change the page links to lower case: I thought: text-transform: lowercase; would work but it changes every letter to lower case when I would like the first letter to be uppercase. The page links in the footer are currently all in uppercase and I would like the first letter uppercase but the rest in lower case for each page link.

[jsjmccracken]

I got the uppercase figured out. The code is:

.x-colophon.bottom .x-nav li.menu-item-34 > a {
text-transform: capitalize;
}

Thank you for the help! This thread is now resolved 🙂

[Paul R]

You’re welcome! 🙂

[Author]

Posts