Jump to content


Photo
- - - - -

Changing the rollover color on navigation


  • Please log in to reply
14 replies to this topic

#1 dagreat8

dagreat8

    Advanced Member

  • Members

  • 43 posts
  • Framework Version:2
  • Country: Country Flag

Posted 13 July 2011 - 08:29 PM

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.

#2 gormanit

gormanit

    Advanced Member

  • Members
  • 53 posts

Posted 13 July 2011 - 09:33 PM

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;}

#3 dagreat8

dagreat8

    Advanced Member

  • Members

  • 43 posts
  • Framework Version:2
  • Country: Country Flag

Posted 13 July 2011 - 10:16 PM

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?

#4 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 13 July 2011 - 10:29 PM

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

#5 dagreat8

dagreat8

    Advanced Member

  • Members

  • 43 posts
  • Framework Version:2
  • Country: Country Flag

Posted 13 July 2011 - 10:37 PM

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

#6 gormanit

gormanit

    Advanced Member

  • Members
  • 53 posts

Posted 13 July 2011 - 10:47 PM

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

#7 dagreat8

dagreat8

    Advanced Member

  • Members

  • 43 posts
  • Framework Version:2
  • Country: Country Flag

Posted 13 July 2011 - 10:49 PM

Same thing :(

#8 dagreat8

dagreat8

    Advanced Member

  • Members

  • 43 posts
  • Framework Version:2
  • Country: Country Flag

Posted 13 July 2011 - 10:53 PM

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.

#9 gormanit

gormanit

    Advanced Member

  • Members
  • 53 posts

Posted 13 July 2011 - 10:54 PM

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

#10 gormanit

gormanit

    Advanced Member

  • Members
  • 53 posts

Posted 13 July 2011 - 11:08 PM

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

#11 dagreat8

dagreat8

    Advanced Member

  • Members

  • 43 posts
  • Framework Version:2
  • Country: Country Flag

Posted 13 July 2011 - 11:14 PM

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

#12 gormanit

gormanit

    Advanced Member

  • Members
  • 53 posts

Posted 13 July 2011 - 11:17 PM

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

#13 dagreat8

dagreat8

    Advanced Member

  • Members

  • 43 posts
  • Framework Version:2
  • Country: Country Flag

Posted 13 July 2011 - 11:50 PM

You are the man...thank you.

#14 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 14 July 2011 - 02:29 AM

Do you need further assistance or is the problem resolved?

#15 dagreat8

dagreat8

    Advanced Member

  • Members

  • 43 posts
  • Framework Version:2
  • Country: Country Flag

Posted 14 July 2011 - 03:01 AM

resolved...thank you