Altitude Pro – Accent Color and Footer Navigation Color

[weborganizing]

Hello,

i hope you can help me. It would be great. I used for the first time the "accent color" (Appearance > Customize -> Colors) and changed the value to green #9bb927 in the Altitude Pro Theme. Then I've created two menus: 1 Header Navigation Menu and 1 Footer Navigation Menu. After that i changed the backgournd colors also to green #9bb927 in the style.css for the header and also for the footer. At this position:

/*
Site Footer
---------------------------------------------------------------------------------------------------- */

.site-footer {
	background-color: #9bb927;
	padding: 20px;
	text-align: center;

and here for the Site Header:

.site-header.dark {
	background-color: #9bb927;
}

My question is how and where can i change the color for the mouse over effect only in the created footer menu. Under this constellation everthing works fine for the Header and the buttons, but the links in the Footer dissapear when you move the mouse over it.

I can´t find the definition for the accent color "#9bb927" in the style.css

I suspect that this needs to be adjusted, but i don´t know, what i have exactly to do.

.nav-footer .genesis-nav-menu {
	padding: 20px 0;
}

.nav-footer .genesis-nav-menu a {
	border: none;
	font-weight: 400;
	letter-spacing: 3px;
	margin: 0 20px;
	padding: 0;
}

It would be really greatful, if you can tell what to do in which File / Position / Code, then i´m able to finish this site.

I try my best, but i´m not a HTML / CSS Coder so far.

Thank you

http://www.heigl-hof.de

[Christoph]

Hi,

the "accent colors" are outputted as so called inline styles.
You won't find them in the style.css.

Around line 1749 of the style.css you will find the code for the hover color:

.site-footer a:hover {
    color: #22a1c4;
}

Because of the inline style from the accent color, the easiest, and sometimes only, way to change the hover color is to add !important after the color definition. E.g.

.site-footer a:hover {
    color: #22a1c4 !important;
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[weborganizing]

Hello Chrisitoph,

thank you very much! You helped me out.

This works perfect and now i understand the red "!important" tags a little bit more. Great Work!

I´ll ask google about the "inline styles" to learn more.

Thank you again!

[Author]

Posts