Joomla Templates Club 406,261 posts

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

#546744

<em>@Saguaros 442105 wrote:</em><blockquote>As I can see that the color in menu on your site is changed now: http://prntscr.com/4ekk25

Let me know if you still need helps on this.</blockquote>

So the semi-colons worked ?? ;):cool::):D

[Robin Friend RobinJoin date: March 2014Posts: 201Downloads:3Uploads:26 Thanks: 49 Thanked: 4 times in 1 posts]

#546774

No, but we are almost there! 🙂 I changed the variables instead but I still can’t figure out how to change the hover color on the menu items.

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

#546780

<em>@rwold 442279 wrote:</em><blockquote>No, but we are almost there! 🙂 I changed the variables instead but I still can’t figure out how to change the hover color on the menu items.</blockquote>

That effect is controlled by the following CSS rule:


.t3-mainnav .nav > li > a:hover, .t3-mainnav .nav > li > a:focus, .t3-mainnav .dropdown.open > a.dropdown-toggle {
background: none repeat scroll 0 0 #404040
box-shadow: 0 0 5px #999
color: #fff

}

So you should be able to paste the following within your custom.css file, and then change the background color (highlighted below) to whatever color code you want.


.t3-mainnav .nav > li > a:hover, .t3-mainnav .nav > li > a:focus, .t3-mainnav .dropdown.open > a.dropdown-toggle {
background: none repeat scroll 0 0 #404040;

}

[Robin Friend RobinJoin date: March 2014Posts: 201Downloads:3Uploads:26 Thanks: 49 Thanked: 4 times in 1 posts]

#546804

It didn’t work. :confused:<em>@TomC 442285 wrote:</em><blockquote>That effect is controlled by the following CSS rule:


.t3-mainnav .nav > li > a:hover, .t3-mainnav .nav > li > a:focus, .t3-mainnav .dropdown.open > a.dropdown-toggle {
background: none repeat scroll 0 0 #404040
box-shadow: 0 0 5px #999
color: #fff

}

So you should be able to paste the following within your custom.css file, and then change the background color (highlighted below) to whatever color code you want.


.t3-mainnav .nav > li > a:hover, .t3-mainnav .nav > li > a:focus, .t3-mainnav .dropdown.open > a.dropdown-toggle {
background: none repeat scroll 0 0 #404040;

}
</blockquote>

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

#546807

Do me a favor, go into your Template Manager–General settings and temporarily set “Optimize CSS” to “No”

[Robin Friend RobinJoin date: March 2014Posts: 201Downloads:3Uploads:26 Thanks: 49 Thanked: 4 times in 1 posts]

#546865

Well, you have helped me to discover the dirty truth! 🙁 I’m not sure what to do now. I have been working in Development mode and using less instead of the css. Now it makes sense why the css codes weren’t working. I turned off development mode and added your codes and it worked perfectly! :):):):):) The only problem is that I made so many changes while working in Development mode and those changes revert back to normal when i turn the development mode off. So I would have to start over with the modifications should I keep working in the development off mode. What happens if I NEVER turn the development mode off and how come my changes didn’t just save in the non development mode? I’m so confused……… :confused:

[Robin Friend RobinJoin date: March 2014Posts: 201Downloads:3Uploads:26 Thanks: 49 Thanked: 4 times in 1 posts]

#546980

Hey! I complied LESS to CSS and it updated my files. Now it all makes sense. Thanks so much for your diligence in helping me! I really appreciate it! :):):):):):)

<em>@rwold 442399 wrote:</em><blockquote>Well, you have helped me to discover the dirty truth! 🙁 I’m not sure what to do now. I have been working in Development mode and using less instead of the css. Now it makes sense why the css codes weren’t working. I turned off development mode and added your codes and it worked perfectly! :):):):):) The only problem is that I made so many changes while working in Development mode and those changes revert back to normal when i turn the development mode off. So I would have to start over with the modifications should I keep working in the development off mode. What happens if I NEVER turn the development mode off and how come my changes didn’t just save in the non development mode? I’m so confused……… :confused:</blockquote>

[Robin Friend RobinJoin date: March 2014Posts: 201Downloads:3Uploads:26 Thanks: 49 Thanked: 4 times in 1 posts]

#547072

One last thing….can you help me change the text color when the menu is in the hover state? It’s white and I want to change it to #404040 .

---

Attachments:

1. 

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

#547556

Within your custom.css file, paste the following CSS rule:


.t3-mainnav .nav > li > a:hover, .t3-mainnav .nav > li > a:focus, .t3-mainnav .dropdown.open > a.dropdown-toggle {
background: none repeat scroll 0 0 #404040;
box-shadow: 0 0 5px #999;
color: #404040;

Let me know if that works for you.

1 user says Thank You to TomC for this useful post

1. Robin

[Robin Friend RobinJoin date: March 2014Posts: 201Downloads:3Uploads:26 Thanks: 49 Thanked: 4 times in 1 posts]

#547766

Thank you! 🙂

[Author]

Posts