Joomla Templates Club 406,261 posts

[jillymot Friend jillymotJoin date: May 2015Posts: 11Downloads:13Uploads:0 Thanks: 3]

#206889

Can you please advise which css code is used to change the colour of the menu text when item is hovered or active?

I have added the following to custom.css to change colour of menu text but cannot figure out how to change colour for hovered or active item.

.navbar-default .navbar-nav > li > a {
color: #BBBBBB
}

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#572807

So that we can try to best assist you, please provide the url of the site you’re working on,
as well as temporarily set “Optimize CSS” to “No” within your Template Manager–General settings.

[jillymot Friend jillymotJoin date: May 2015Posts: 11Downloads:13Uploads:0 Thanks: 3]

#572846

Hi Tom

The URL is:

http://positiveimpact.global/new

I have changed the background of the navigation bar to white, so need to change the text from white to another colour.

I think there will be two places – when rolling over there is a transition to grey then white and when the page is active the text is white.

Thank you for your assistance.

Kind regards
Jill

[jillymot Friend jillymotJoin date: May 2015Posts: 11Downloads:13Uploads:0 Thanks: 3]

#737880

Hi Tom

The URL is:

http://positiveimpact.global/new

I have changed the background of the navigation bar to white, so need to change the text from white to another colour.

I think there will be two places – when rolling over there is a transition to grey then white and when the page is active the text is white.

Thank you for your assistance.

Kind regards
Jill

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#572968

For the ACTIVE state – when one is on the page . . . .

Look to file path –> /templates/ja_charity/local/css/template.css
at line 1066:


.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
color: #ffffff;
}

Change the color code to whatever color code you wish.

For the HOVER state . . . .

A little further down the list (same CSS file), find the following CSS rule:


.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
background-color: transparent;
color: #ffffff;
}

Again, change the color code to whatever color code you wish.

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Hope That Helps.

1 user says Thank You to TomC for this useful post

1. jillymot

[jillymot Friend jillymotJoin date: May 2015Posts: 11Downloads:13Uploads:0 Thanks: 3]

#573027

Many thanks Tom.

I was getting confused, as when using firebug the css was referring to a file in the t3assets folder.

I added the code you outlined above into my custom.css file and updated to colours I wanted and it is all working perfectly 🙂

[jillymot Friend jillymotJoin date: May 2015Posts: 11Downloads:13Uploads:0 Thanks: 3]

#738060

Many thanks Tom.

I was getting confused, as when using firebug the css was referring to a file in the t3assets folder.

I added the code you outlined above into my custom.css file and updated to colours I wanted and it is all working perfectly 🙂

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#573104

<em>@jillymot 476658 wrote:</em><blockquote>Many thanks Tom.

I was getting confused, as when using firebug the css was referring to a file in the t3assets folder.

I added the code you outlined above into my custom.css file and updated to colours I wanted and it is all working perfectly :)</blockquote>

Glad I could be of assistance . . . All the best with your continuing site development. 🙂

1 user says Thank You to TomC for this useful post

1. titorus

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#738137

<em>@jillymot 476658 wrote:</em><blockquote>Many thanks Tom.

I was getting confused, as when using firebug the css was referring to a file in the t3assets folder.

I added the code you outlined above into my custom.css file and updated to colours I wanted and it is all working perfectly :)</blockquote>

Glad I could be of assistance . . . All the best with your continuing site development. 🙂

1 user says Thank You to TomC for this useful post

1. titorus

[Author]

Posts