CSS structure

[jmorin]

Hi,
I’m trying to make some modifications to Business Consulting 3 demo. With multiple css files and how dense they are, I’m having trouble locating the css to change things. In this particular case, I just want to change the color of the nav-links.
When I go into the theme.css and search for nav-links, I don’t see any that set the color. Where is this color coming from?

Thanks

---

Template Version: 12.1

[Support]

Hello, you can use the Style Switcher to generate the color you want:

IMPORTANT! How to use a skin

And if needed you can create custom colors for an specific element, checking which css is used:

How to find which css is being applied to an element.

But we recommend creating a style with the style switcher.

---

[jmorin]

The style switcher doesn’t work in this case.

I used the second method to inspect and edit the custom.css, with

.nav-link {
	color:#fff !important;
}

however it overrides all the states. I tried:

.nav-link.hover {
	color:color(display-p3 0.87 0.346 0.208) !important;
}

but that doesn’t work, so I don’t what the correct syntax is

---

[Support]

Hi, for the main navigation we use this css:

@media (min-width: 992px) {
    #header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a,
	#header .header-nav.header-nav-line:not(.header-nav-light-text) nav > ul > li > a {
        color: #444;
    }
	
    #header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li:hover > a,
	#header .header-nav.header-nav-line:not(.header-nav-light-text) nav > ul > li:hover > a {
        color: #111;
    }
}

So you can add that to custom.css to replace the original one.

---

[Author]

Posts