Joomla Templates Club 406,261 posts

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#204585

Hi there,

I’m trying to work out with this, but I have not succes: I would like to change Main navigation background color.
Take a look to the attached file.

And in the same way how to change megamenu background color

Thanks 😉

---

Attachments:

1. 

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#562966

Any idea?
Please…

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#562967

<em>@edd 463233 wrote:</em><blockquote>Any idea?
Please…</blockquote>

In this case, you have to change much the background from css style below

Open templates/ja_mitius/css/template.css file, find and see it

.ja-mainnav .navbar {
color: #666
margin-bottom: 0;
margin-top: 0;
background: #f5f5f5
overflow: visible;
z-index: 11;
}
.ja-mainnav .navbar-inner {
min-height: 50px;
background: #f5f5f5
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
border: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding: 0;
position: relative;
}
.navbar-inner .left-mainnav {
width: 10px;
height: 60px;
background: url(../images/left-mainnav.png) no-repeat left top;
position: absolute;
left: -10px;
top: 0px;
}
.navbar-inner .right-mainnav {
width: 10px;
height: 60px;
background: url(../images/right-mainnav.png) no-repeat left top;
position: absolute;
right: -10px;
top: 0px;
}
.ja-mainnav .nav li.dropdown.open > .dropdown-toggle {
background-color: #fff
color: #f76000
}
.ja-mainnav .nav li.dropdown.active > .dropdown-toggle,
.ja-mainnav .nav li.dropdown.open.active > .dropdown-toggle,
.ja-mainnav .nav > li.dropdown.open.active > a:hover {
background: #fff
color: #f76000
}

.ja-mainnav .navbar .nav > li > a:focus,
.ja-mainnav .navbar .nav > li > a:hover {
color: #f76000
background: #fff
outline: none;
text-shadow: none;
}
.ja-mainnav .navbar .nav > .active > a,
.ja-mainnav .navbar .nav > .active > a:hover,
.ja-mainnav .navbar .nav > .active > a:focus {
background: #fff
color: #f76000
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-shadow: none;
}
.ja-mainnav .navbar .btn-navbar {
float: left;
padding: 7px 10px;
margin: 7px 20px 0;
color: #fff
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #eeeeee
background-image: -moz-linear-gradient(top,#f2f2f2,#e8e8e8)
background-image: -webkit-gradient(linear,0 0,0 100%,from(#f2f2f2),to(#e8e8e8));
background-image: -webkit-linear-gradient(top,#f2f2f2,#e8e8e8)
background-image: -o-linear-gradient(top,#f2f2f2,#e8e8e8)
background-image: linear-gradient(to bottom,#f2f2f2,#e8e8e8)
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe8e8e8', GradientType=0);
border-color: #e8e8e8 #e8e8e8 #c2c2c2
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);

*background-color: #e8e8e8
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
}
.ja-mainnav .navbar .btn-navbar:hover,
.ja-mainnav .navbar .btn-navbar:focus,
.ja-mainnav .navbar .btn-navbar:active,
.ja-mainnav .navbar .btn-navbar.active,
.ja-mainnav .navbar .btn-navbar.disabled,
.ja-mainnav .navbar .btn-navbar {
color: #fff
background-color: #e8e8e8
}
.ja-mainnav .navbar .btn-navbar:active,
.ja-mainnav .navbar .btn-navbar.active {
background-color: #cfcfcf 9;
}
.ja-mainnav .navbar .btn-navbar .icon-bar {
width: 18px;
height: 2px;
background-color: #f5f5f5
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.25);
box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

.ja-mainnav .dropdown-menu .disabled > a:hover {
background-color: transparent;
}


1 user says Thank You to Ninja Lead for this useful post

1. edd

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#562976

Thanks is working fine 🙂

[Author]

Posts