Customizing Navbar, background color, custom link colors

[Pwohlsen]

Hello,

I bought your template, and have been experimenting with it trying to customize the nav container to a blue color #165a7. This I was able to do, but I have a challenge where I have to try to come close to an existing brand for a non-profit, which has the blue navbar, white logo and white nav links. I used the theme switcher, and if I make the primary color the #165a7 blue, then the hover state appears to be based exclusively on this color, the hover state is not so visible as it is blue on blue… I can make the primary color white either. Is there a way to customize this?

---

Template Version: /index-corporate-6.html

[Support]

Hello, thanks for your purchase, please check below the CSS code you need to customize the nav:

(css/custom.css)

@media (min-width: 992px) {

	// Default State
	#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;
	}

	// Active (not hover) State
	#header .header-nav.header-nav-links nav > ul:not(:hover) > li > a.active {
		color: #FE423D;
	}
	
	// Hover State
	#header .header-nav.header-nav-links nav > ul li:hover > a {
		color: #FE423D;
	}

}

I hope that helps.

Kind Regards,

Jonas

---

[Pwohlsen]

Jonas,

Firstly, thanks for your VERY swift reply…

I did copy your code into the css/custom.css document along with specs for the typography, those styles are showing up nicely, but the navbar style has not changed.

Page is here:

https://wohlsendesign.com/dev/

Custom CSS is here:

https://wohlsendesign.com/dev/css/custom.css

I have also included my ftp credentials if you need them.

Best Regards,

Peter Wohlsen

---

[Support]

Hello, I’m sorry, I forgot to say that the comments (“// Default State, etc…”) can’t be added in the .css file.

Please try this:

@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: #777;
	}

	#header .header-nav.header-nav-links nav > ul:not(:hover) > li > a.active {
		color: #0088cc;
	}

	#header .header-nav.header-nav-links nav > ul li:hover > a {
		color: #0088cc;
	}

	#header .header-nav-main nav > ul > li.dropdown .dropdown-menu {
		border-top-color: #0088cc;
	}

}

Let me know if there is anything else I can help you with.

Kind Regards,

Jonas

---

[Pwohlsen]

Jonas,

Gratitude for your quick fix, worked like a charm. I have the desktop view of the navbar just about perfect. Would be nice if I could implement a darker background as sort of a rollover background color, and have a border of 1px in a lighter color on each vertical side of the main nav buttons. I imagine that would be achieved by modifying the code you sent me that goes into the custom CSS file.

Now I need to know how to style the mobile nav, which still has the red text, would like to change the font also.

I’m so happy to have your assistance…

Best Regards,

Peter Wohlsen

---

[Support]

Hello, please try the following css:

@media (max-width: 991px) {
	#header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a {
		color: #1654a7;
	}
}

Let me know if there is anything else I can help you with.

Kind Regards,

Jonas

---

[Pwohlsen]

Jonas,

Again, thanks for your support… I don’t think I ever had it so good.

For the Mobile nav, your styles worked like a charm, but I wonder if I could make the hover background on the mobile nav background to #99ccff, keeping the text the same blue, but have the light blue background to add a little interactivity. The On click value is set to the red theme color. The On click value could be #99ccff as well.

Also, I was wondering what the minimum file structure is to upload once complete. I’m guessing I can leave out the vendor, master and video folders.

Best Regards,

Peter Wohlsen

---

[Support]

Hello, this is the CSS you need:

@media (max-width: 991px) {
	#header .header-nav-main nav > ul li:hover {
		background: #99ccff;
	}
	
	#header .header-nav-main nav > ul li:hover a {
		color: #1654a7;
	}
	
	#header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a:active {
		background: transparent;
		color: #1654a7;
	}
}

Regards,

Jonas

---

[Pwohlsen]

Jonas,

I noticed that my top nav is sticky in desktop view, but in a mobile view, and iPad the nav is not sticky… Can you help me with that?

here is the site:

http://www.wohlsendesign.com/dev

Best Regards,

Peter Wohlsen

---

[Support]

Hello, you can change the settings in the HTML:

Please try that and let me know if you need further assistance.

Kind Regards,

Jonas

---

[Author]

Posts