X-Cart forums

[superdave144]

What is the custom CSS I need to add to change the colors of the navigation bar? I need to set a normal color and a hover color.

[superdave144]

I need to change all 3 colors and I'm having a hard time locating the proper CSS code. I need the normal color, the hover color and the active color. The font color can stay the same.

[totaltec]

Dave can you post a link to the page? Then we can inspect your CSS.

[kevinrm]

This is the code I use to make it green:

/* nave bar color */
.navbar-inverse {
background-color: #4C6E14;
border-color: #164801;
}

[kevinrm]

Further, I use this to control the font size of the navbar:

/*navbar text*/
.navbar-nav > li > a {
text-decoration: none;
text-align: center;
font-size: 0.8em;
padding-left: 25px;
padding-right: 25px;
}

[razortw]

Try this. You may want to change the actual colors though.

.navbar-inverse {
  background-color: #f00;
  border-color: #f00;
}
#top-main-menu > li:hover > a,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a:hover {
  background-color: #d00 !important;
}

[superdave144]

Thanks guys. The site is www.justretrogames.com. I was able to get most of the colors correct. Please see the code below. For some reason I still see a dark grey remnant when I click on links sometimes. What am I missing?

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

/* Sets color of navigation bar mobile */
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
/* 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; 
}

[qualiteam]

The dark gray background comes from this rule:

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

You should add rule that will override styles defined for ".navbar-inverse .navbar-nav > li > a:focus" selector.

[superdave144]

Ok that did it. Thank you!