Joomla Templates Club 406,261 posts

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#889919

Hi

Try to add this to your custom.css

.navbar-default .navbar-nav,.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active.open > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav {
    background-color:#1b95e2!important;
    color:#fff!important;
}
.navbar-default .navbar-nav > li > a {
    border-right:1px solid #fff!important;
    color:#fff!important;
}

You can change colors as you prefer

[hyuckjin21 Friend hyuckjin21Join date: February 2014Posts: 17Downloads:79Uploads:13 Thanks: 1]

#889925

I want to change the color of the only one menu like the attatched file.
When I follow the instruction, all of the menu are changed.

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#890093

Add this code to your custom.css

.navbar-default .navbar-nav > .custom {
    background:#1b95e2!important;
}

Then open your template manager -> Your default template-> Megamenu -> select item -> and in extra class add your custom css class

---

Attachments:

1. 
2. 

[hyuckjin21 Friend hyuckjin21Join date: February 2014Posts: 17Downloads:79Uploads:13 Thanks: 1]

#890394

I follow your direction, but still not working. I attatched the file for you to figure out the config

---

Attachments:

1. 
2. 

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#890412

Ok try with this

remove the old code and add the code below into custom.css file

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active.open > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active.open > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active.open > a:focus .custom {
background:#1b95e2!important;
}

---

Attachments:

1. 

[hyuckjin21 Friend hyuckjin21Join date: February 2014Posts: 17Downloads:79Uploads:13 Thanks: 1]

#890637

Thank you for help. It works, But what I really want to do is that depending on class, I want to show the different color on each menu. I made two different class on the custom.css . one is .custom, and the other one is .custom-orange, as following the attached files
After that, the only one menu is changed.

Please help for this issue.

---

Attachments:

1. 
2. 
3. 

[hyuckjin21 Friend hyuckjin21Join date: February 2014Posts: 17Downloads:79Uploads:13 Thanks: 1]

#890926

ps. I found another problem. the code you gave me is not what I really want to modify.
when I click the menu, the color of all menu are changed following custom.css
I want to show the menu like the attached picture.

---

Attachments:

1. 

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#890951

Hi there

What you want is still not clear to me – mainnav has many css code for main button, dropdown, active,hover, etc etc

So would be nice if you could describe in details what you need and in which specific situation

active page active menu color
dropdown menus colors

[hyuckjin21 Friend hyuckjin21Join date: February 2014Posts: 17Downloads:79Uploads:13 Thanks: 1]

#891597

I just want to change Main Button like the picture as I attached. When the menu is selected, it should keep the same color.

If you go to "piartcenter.com" currently, "PI 소개" is activated with orange color. When you click the "입학안내", the manu is activated with orange color, but I want to color yellow with the red active bar.

When you click the " F-1학생" right now, the menu is activated with orange color like others, but I want to color blue with the red active bar.

Simply say, just change 3 main menu color from black to orange, yellow and blue like the attached picture. So the menu is selected, just red bar is shown at upside like current status.

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#892166

Hi
I read your last post and i understand you want to apply 3 different color for 3 different menu items when they are active .
For this you need to add extra class for these menu item via Mega menu .
Example : http://prntscr.com/a9arqi

Now define the class in custom.css file

orange class is for orange and yellow is for yellow color menu item .

.navbar-default .navbar-nav > .active.orange  > a { background:#f77227!important;}

.navbar-default .navbar-nav > .active.yellow  > a { background:#FFFF00!important;}

Hope it solve the issue .

1 user says Thank You to Pankaj Sharma for this useful post

1. hyuckjin21

[hyuckjin21 Friend hyuckjin21Join date: February 2014Posts: 17Downloads:79Uploads:13 Thanks: 1]

#893131

I solved the problem. I used the following
code`.navbar-default .orange > a { background:#f77227!important;}

.navbar-default .blue > a { background:#1c94e2!important;}

.navbar-default .red > a { background:#e72d3b!important;}`

[Author]

Posts