Changing the Navigation Bar

Resolved gettinger
(@gettinger)

11 years, 1 month ago
Hey guys, thanks for everyone’s help thus far, it’s been a lifesaver.

I need to change the navigation bar on my website to light blue. I think I’ve managed to find the code in the parent theme, but it doesn’t seem to work when I add it to my child theme, the background just goes gray.

http://test.actionunited.org/
```
.navbar {
	background: #FFF;
	border: 0;
	border-radius: 0 !important;
	text-align: left;
	-webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
	box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
}
```
I want to change the background to #add8e6

Is there something conflicting with the stylesheet? Can someone help me out?

Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

(@inkers92)

Hi,
Are you sure you are targeting the element correctly. I usually put this in to make sure I have the correct element. (Don’t forget to remove it after!)

border:2px solid red;

Also, I recommend that you read this on changing the background of things.

http://www.w3schools.com/css/css_background.asp

At the moment you seem to have it set to white (#FFF).

Thread Starter

gettinger

(@gettinger)

11 years, 1 month ago

I figured out what to do, here is the code for anyone who runs into the same thing

.navbar {
	background: #add8e6;
	border: 0;
	border-radius: 0 !important;
	text-align: left;
	-webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
	box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
}

#main-nav {
	position: fixed;
	width: 100%;
	z-index: 1000;
	min-height: 75px;
}
#main-nav.fixed {
	position: fixed !important;
	top: 0;
}
.navbar-inverse .navbar-nav >li {
	display: inline;
	margin-right: 20px;
	margin-top: 20px;
}
.navbar-inverse .navbar-nav>li:last-child {
	margin-right: 0 !important;
}
.navbar-inverse .navbar-nav>li>a {
	color: #000000;
	padding: 0;
	line-height: 35px;
}
.navbar-inverse .main-navigation ul > li {
	display: inline;
	margin-right: 20px;
	margin-top: 20px;
}
.navbar-inverse .main-navigation > ul > li:last-child {
	margin-right: 0 !important;
}
.navbar-inverse .main-navigation > ul > li > a {
	color: #add8e6;
	padding: 0;
	line-height: 35px;
}
.navbar-inverse .navbar-nav ul.sub-menu {
	display: none;
	position: absolute; top: 100%;
	background:#fff;
	width:200px;
	box-shadow: 3px 3px 2px rgba(50, 50, 50, 0.08);
}
.navbar-inverse .navbar-nav ul.sub-menu {
	margin:0;
}
.navbar-inverse .navbar-nav ul.sub-menu ul.sub-menu{
	position: absolute;
	left:100%;
	top:0;
}
.navbar-inverse .navbar-nav ul.sub-menu li {
	float: none;
	position: relative;
	list-style:none;
	padding:10px;
}
.navbar-inverse .navbar-nav ul.sub-menu li a {
	color:#404040;
}
.navbar-inverse .navbar-nav ul.sub-menu li:hover > a {
	color:#e96656;
}
.navbar-inverse .navbar-nav li:hover > ul.sub-menu {
	display: block;
}

.navbar-brand {
	height: 76px;
	position: relative;
	line-height: 45px;
}
.current a {
	color: #e96656 !important;
	position: relative;
	outline: none;
}
.current:before {
	position: absolute;
	margin: auto;
	z-index: 1;
	content: "";
	width: 75%;
	height: 2px;
	background: #e96656;
	bottom: 0px;
	left: 12.5%;
}
.navbar-inverse .navbar-nav>li>a:hover {
	color: #e96656;
	outline: none;
}
.navbar-toggle {
	border: 0;
	background-color: #808080;
	margin-top: 23px;
}
.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus {
	background-color: #e96656;
	filter: alpha(opacity=100);
	opacity: 1;
	box-shadow: none;
}
.navbar-toggle.active{
    background-color: #e96656 !important;
}
.navbar-toggle.collapsed{
    background-color: #808080 !important;
}

Hardeep Asrani

(@hardeepasrani)

11 years, 1 month ago

Hi,

I’m glad that you figured it out. Please mark this thread as resolved, so other people could know that you have the answer. And also please consider leaving a review if you like the theme. 🙂

Regards,
Hardeep

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Changing the Navigation Bar’ is closed to new replies.