X-Cart forums - NavBar Color Changes

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (X-Cart 5) (https://forum.x-cart.com/forumdisplay.php?f=56)

- - NavBar Color Changes (https://forum.x-cart.com/showthread.php?t=73843)

superdave144

04-14-2016 07:01 AM

NavBar Color Changes

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

04-14-2016 09:50 AM

Re: NavBar Color Changes

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

04-14-2016 04:59 PM

Re: NavBar Color Changes

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

kevinrm

04-14-2016 08:13 PM

Re: NavBar Color Changes

This is the code I use to make it green:

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

kevinrm

04-14-2016 08:17 PM

Re: NavBar Color Changes

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

04-15-2016 12:26 AM

Re: NavBar Color Changes

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

Code:

.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

04-15-2016 05:24 AM

Re: NavBar Color Changes

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?

Code:

/* 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

04-18-2016 01:27 AM

Re: NavBar Color Changes

The dark gray background comes from this rule:

Code:

.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

04-18-2016 10:27 AM

Re: NavBar Color Changes

Ok that did it. Thank you!

All times are GMT -8. The time now is 08:35 AM.