Title: Changing the Navigation Bar
Last modified: August 24, 2016

---

# Changing the Navigation Bar

 *  Resolved [gettinger](https://wordpress.org/support/users/gettinger/)
 * (@gettinger)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/changing-the-navigation-bar/)
 * 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/](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](https://wordpress.org/support/users/inkers92/)
 * (@inkers92)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/changing-the-navigation-bar/#post-5997964)
 * 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](http://www.w3schools.com/css/css_background.asp)
 * At the moment you seem to have it set to white (#FFF).
 *  Thread Starter [gettinger](https://wordpress.org/support/users/gettinger/)
 * (@gettinger)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/changing-the-navigation-bar/#post-5998002)
 * 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](https://wordpress.org/support/users/hardeepasrani/)
 * (@hardeepasrani)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/changing-the-navigation-bar/#post-5998115)
 * 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.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/zerif-lite/1.8.5.49/screenshot.
   png)
 * Zerif Lite
 * [Support Threads](https://wordpress.org/support/theme/zerif-lite/)
 * [Active Topics](https://wordpress.org/support/theme/zerif-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/zerif-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/zerif-lite/reviews/)

 * 3 replies
 * 3 participants
 * Last reply from: [Hardeep Asrani](https://wordpress.org/support/users/hardeepasrani/)
 * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/changing-the-navigation-bar/#post-5998115)
 * Status: resolved