Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Need Help Changing Nav Bar Colors

 
Reply
   X-Cart forums > X-Cart 5 > Modifying the design and features (X-Cart 5)
 
Thread Tools Search this Thread
  #1  
Old 03-02-2018, 12:01 PM
 
karichristen karichristen is offline
 

Newbie
  
Join Date: Mar 2018
Posts: 7
 

Exclamation 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!
__________________
Business 5.3.4.5
Reply With Quote
  #2  
Old 03-05-2018, 11:14 AM
 
mcupka mcupka is offline
 

eXpert
  
Join Date: Jan 2013
Posts: 204
 

Default 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; }
Reply With Quote
  #3  
Old 03-05-2018, 11:25 AM
 
karichristen karichristen is offline
 

Newbie
  
Join Date: Mar 2018
Posts: 7
 

Default 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: progidXImageTransform.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;
}
__________________
Business 5.3.4.5
Reply With Quote
  #4  
Old 03-05-2018, 11:28 AM
 
mcupka mcupka is offline
 

eXpert
  
Join Date: Jan 2013
Posts: 204
 

Default 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.
Reply With Quote
  #5  
Old 03-05-2018, 11:34 AM
 
karichristen karichristen is offline
 

Newbie
  
Join Date: Mar 2018
Posts: 7
 

Default 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?
__________________
Business 5.3.4.5
Reply With Quote
  #6  
Old 03-05-2018, 11:41 AM
 
mcupka mcupka is offline
 

eXpert
  
Join Date: Jan 2013
Posts: 204
 

Default Re: Need Help Changing Nav Bar Colors

Quote:
Originally Posted by karichristen
Okay thank you again! Also could you help me out with changing the hover / selected to red instead of light blue?
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; }
Reply With Quote
  #7  
Old 03-07-2018, 11:06 AM
 
karichristen karichristen is offline
 

Newbie
  
Join Date: Mar 2018
Posts: 7
 

Default 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: progidXImageTransform.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?
__________________
Business 5.3.4.5
Reply With Quote
  #8  
Old 03-09-2018, 11:44 AM
 
mcupka mcupka is offline
 

eXpert
  
Join Date: Jan 2013
Posts: 204
 

Default 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.
Reply With Quote
  #9  
Old 03-09-2018, 11:54 AM
 
mcupka mcupka is offline
 

eXpert
  
Join Date: Jan 2013
Posts: 204
 

Default 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; }
Reply With Quote
Reply
   X-Cart forums > X-Cart 5 > Modifying the design and features (X-Cart 5)


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 09:24 PM.

   

 
X-Cart forums © 2001-2020