• 0
Sign in to follow this  
Followers 0

Changing the rollover color on navigation

Question

Posted · Report post

Hello, I need help changing the rollover color on my pagelines theme. I am not familiar with css. I figured there would be an easy way to customize the rollover since all the other color options seem to be available. Please help. Thank you.

Share this post


Link to post
Share on other sites

14 answers to this question

  • 0

Posted · Report post

Fred, You can go into wordpress admin > PlatformPro > Custom Code and enter this in the CSS field .main_nav ul li:hover {background:red; color:white;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Awesome, thank you. I applied it and it helped it some areas but overall it's acting weird...I can't really explain it. This is the code I added: .main_nav ul li:hover {background:#0f4357; color:#279fd2;} To this website: www.frescoristorante.com however, you will see that the hover is still gray...the blue color I applied only shows up when I hover over very small and specific areas...any ideas?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

What if you added !important tag like so: `.main_nav ul li:hover {background:#0f4357!important; color:#279fd2!important;}` What does that change?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Adam, thank you for the reply. However it had no affect :/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I think the selector was incorrect, try: .main-nav li:hover {background:#0f4357; color:#279fd2;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Same thing :(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I am able to see it when I hover over the drop down menu and then hover over the thin dark separator lines...I don't know if that helps but thought I should mention it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

What colors/look are you trying to achieve. Do you want the top level menu items to be the same look as the sub menu items on inactive and hover or do you want the sub items to be the same as the top level? If you can specify I can better help with the code

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Try: .main-nav li a:hover {background:#0f4357!important; color:#fff!important;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That worked! Thank you! What was it in the code that did it? What was the genius behind it?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Two things. It needed to target the a element, not the li. And it needed the !important to trump the other rules.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You are the man...thank you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Do you need further assistance or is the problem resolved?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

resolved...thank you

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0