Need Help Changing Nav Bar Colors
 

Hi I am having the most trouble changing my main nav bar colors.

Im using Template #51 Ultimate Skin

I would like to change the background to Navy and the selected page to red, font to white and drop down background to white and black font and red Hover.

Here is the current code:
* Top menu main block styling
*/

.navbar-inverse {
background-color: red;
border-color: #000080;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #ffffff;
background-color: #081b7a;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #081b7a;

I just have no idea what to change because I tried changing all of these and NOTHING adjusts the colors of the menu no matter what I change. So I'm thinking I need to overwrite something Im just not sure?

Website link: http://personal.x-cart.com/krystlewarschakyahoocom/

Please help!

Re: Need Help Changing Nav Bar Colors
 

Hello,

1) To change the background of the main navbar (so instead of the blue you currently have, this will change it black):
.navbar.navbar-inverse.mobile-hidden { background: #000; }

2) Selected page to have a red background:
.navbar-inverse .navbar-nav>li.active>a { background: #FF0000; }

3) Red hover background for dropdown items:
#top-main-menu li li:hover>a, #top-main-menu li li a:hover { background: #FF0000; }

Hope that helps.

EDIT: And to change the current nav hover bg color from blue to whatever:
#top-main-menu>li:hover>a { background: #000; }

Re: Need Help Changing Nav Bar Colors
 

Okay so it seemed to have changed the main nav bar to black only when you go to another page on the nav bar, not on the home page.

Here is the full css code, maybe there is something I need to delete?

/**
* Top menu main block styling
*/


}

/* Sets color of navigation bar in mobile */
.mm-navbar {
background: #195ad2;
}

/* Sets color of navigation bar mobile */
.navbar.navbar-inverse.mobile-hidden { background: #000; }

inverse .navbar-nav>li.active>a { background: #FF0000; }

#top-main-menu li li:hover>a, #top-main-menu li li a:hover { background: #FF0000; }


/* Font Color */
color: #fff;
/* Active Cell Color*/
background-color: #1c4ba1;
}
#top-main-menu>li>span.primary-title.tap, #top-main-menu>li>a.tap, #top-main-menu>li:hover>span.primary-title, #top-main-menu>li:hover>a {
/* Hover Color*/
background-color: #2068ee;
}
.navbar-inverse {
/* Background Color*/
background-color: #195ad2;
/* Menu Border Color*/
border-color: #195ad2;
}
/**
* Main blocks of the sidebar (Top categories, Sale, New arrivals Recently viewed and so on)
*/
.sidebar div.block {
padding: 0px;
border-color: #000080;
border-width: 2px;
}

/**
* Header of the main blocks in the sidebar
*/
.sidebar .block .head-h2 {
padding: 14px 20px 14px 20px;
margin: 0px;
border-color: #000080;
border-radius: 5px;
color: #5e6266;
}

/**
* Content of the main blocks in the sidebar
*/
.sidebar div.block div.content {
padding: 0px 20px 20px 20px;
border-radius: 5px;
}

/**
* Styles for the links inside the main blocks of the sidebar
*/
.sidebar ul.menu a {
border-top: 1px solid #daedfc;
}

/**
* Specific styles for the Top categories block in the side bar
*/
.sidebar div.block.block-product-filter div.content {
padding: 0px 10px 20px 10px;
}

/**
* Specific styles for the Top categories block in the side bar
*/
.sidebar .block.block-top-categories .head-h2 {
background: #000080;
}

.sidebar div.block.block-top-categories div.content {
background: #000080;
}

.sidebar div.block.block-top-categories div.content a {
color: #000080;
}

/**
* Header for specific side-bar box ("New arrivals" products)
*/
.sidebar .block.block-new-arrivals .head-h2 {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
background: #f2f2f2;
background: -moz-linear-gradient(top, #f7fcff 0%, #d9edfc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7fcff), color-stop(100%,#d9edfc));
background: -webkit-linear-gradient(top, #f7fcff 0%,#d9edfc 100%);
background: -o-linear-gradient(top, #f7fcff 0%,#d9edfc 100%);
background: -ms-linear-gradient(top, #f7fcff 0%,#d9edfc 100%);
background: linear-gradient(to bottom, #f7fcff 0%,#d9edfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fcff', endColorstr='#d9edfc',GradientType=0 );
}

/**
* Price info block in the "New arrivals" product list in the side-bar box
*/
.sidebar .block.block-new-arrivals div.product-price {
margin-top: 10px;
}

/**
* Price info text in the "New arrivals" product list in the side-bar box
*/
.sidebar .block.block-new-arrivals .products-sidebar-small-thumbnails span.product-price {
font-size: 26px;
}

/**
* The last product element block in the New arrivals list
*/
.sidebar .block.block-new-arrivals ul.products-sidebar li.last {
padding-bottom: 10px;
}

/**
* The last element block in the New arrivals list (There is a link "All new products")
*/
.sidebar .block.block-new-arrivals ul.products-sidebar li:last-child {
padding-bottom: 10px;
}

Re: Need Help Changing Nav Bar Colors
 

I only tested it on the homepage and it works for me?

EDIT: Looks like you've got it.

Re: Need Help Changing Nav Bar Colors
 

Okay thank you again! Also could you help me out with changing the hover / selected to red instead of light blue?

Re: Need Help Changing Nav Bar Colors
 

See my first post.

##Selected page to have a red background:
.navbar-inverse .navbar-nav>li.active>a { background: #FF0000; }

And you'll need this line as well for the dropdown menu hover color:
#top-main-menu>li:hover>span.primary-title { background: #FF0000; }

Re: Need Help Changing Nav Bar Colors
 

Right I have that in there and the hover is still a light blue color (which I would like to be changed to red)

This template is really making it hard to change completely. For instance the nav bar changes from navy to black when you click on the different tabs and then when you refresh it changes back to navy (help!)
I really think there is some code in this CSS that is making it difficult to change the colors.


Here is the full CSS code again:

/**
* Top menu main block styling
*/


}

/* Sets color of navigation bar in mobile */
.mm-navbar {
background: #195ad2;
}

/* Sets color of navigation bar mobile */
.navbar.navbar-inverse.mobile-hidden { background: #08255c; }
#top-main-menu li li:hover>a, #top-main-menu li li a:hover { background: #FF0000; }

inverse .navbar-nav>li.active>a { background: #FF0000; }
#top-main-menu li li:hover>a, #top-main-menu li li a:hover { background: #FF0000; }


/* Font Color */
color: #fff;
/* Active Cell Color*/
background-color: #FF0000;
}
#top-main-menu>li>span.primary-title.tap, #top-main-menu>li>a.tap, #top-main-menu>li:hover>span.primary-title, #top-main-menu>li:hover>a {
/* Hover Color*/
background-color: #FF0000;
}
.navbar-inverse {
/* Background Color*/
background-color: #D3D3D3;
/* Menu Border Color*/
border-color: #195ad2;
}
/**
* Main blocks of the sidebar (Top categories, Sale, New arrivals Recently viewed and so on)
*/
.sidebar div.block {
padding: 0px;
border-color: #000080;
border-width: 2px;
}

/**
* Header of the main blocks in the sidebar
*/
.sidebar .block .head-h2 {
padding: 14px 20px 14px 20px;
margin: 0px;
border-color: #000080;
border-radius: 5px;
color: #5e6266;
}

/**
* Content of the main blocks in the sidebar
*/
.sidebar div.block div.content {
padding: 0px 20px 20px 20px;
border-radius: 5px;
}

/**
* Styles for the links inside the main blocks of the sidebar
*/
.sidebar ul.menu a {
border-top: 1px solid #daedfc;
}

/**
* Specific styles for the Top categories block in the side bar
*/
.sidebar div.block.block-product-filter div.content {
padding: 0px 10px 20px 10px;
}

/**
* Specific styles for the Top categories block in the side bar
*/
.sidebar .block.block-top-categories .head-h2 {
background: #000080;
}

.sidebar div.block.block-top-categories div.content {
background: #000080;
}

.sidebar div.block.block-top-categories div.content a {
color: #000080;
}

/**
* Header for specific side-bar box ("New arrivals" products)
*/
.sidebar .block.block-new-arrivals .head-h2 {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
background: #f2f2f2;
background: -moz-linear-gradient(top, #f7fcff 0%, #d9edfc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7fcff), color-stop(100%,#d9edfc));
background: -webkit-linear-gradient(top, #f7fcff 0%,#d9edfc 100%);
background: -o-linear-gradient(top, #f7fcff 0%,#d9edfc 100%);
background: -ms-linear-gradient(top, #f7fcff 0%,#d9edfc 100%);
background: linear-gradient(to bottom, #f7fcff 0%,#d9edfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fcff', endColorstr='#d9edfc',GradientType=0 );
}

/**
* Price info block in the "New arrivals" product list in the side-bar box
*/
.sidebar .block.block-new-arrivals div.product-price {
margin-top: 10px;
}

/**
* Price info text in the "New arrivals" product list in the side-bar box
*/
.sidebar .block.block-new-arrivals .products-sidebar-small-thumbnails span.product-price {
font-size: 26px;
}

/**
* The last product element block in the New arrivals list
*/
.sidebar .block.block-new-arrivals ul.products-sidebar li.last {
padding-bottom: 10px;
}

/**
* The last element block in the New arrivals list (There is a link "All new products")
*/
.sidebar .block.block-new-arrivals ul.products-sidebar li:last-child {
padding-bottom: 10px;
}



Side note, would you also be able to help me change the font colors and shopping bag colors on the upper right hand corner?

Re: Need Help Changing Nav Bar Colors
 

The CSS code I gave you in the post before yours certainly does work. The reason it was going from black to navy is because you were page cached.

Re: Need Help Changing Nav Bar Colors
 

.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background: #FF0000; }

Header colors:
LINKS:
.desktop-header a { color: #000; }

You can probably fix the cart bag color with this:
#header svg { color: #000; }