Jump to content


Photo
- - - - -

NavBar Hover Color

navbar

  • Please log in to reply
17 replies to this topic

#1 ginnywills

ginnywills

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 05 October 2012 - 03:56 PM

Hi,

I want to change the color of the text in the NavBar when you hover over it from white to pink (#ff0099). I have tried loads of different CSS and nothing is working.

www.audaciousgroup.com

Help?

Thanks,
Ginny

#2 catrina

catrina

    Advocate

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

Posted 05 October 2012 - 04:51 PM

What CSS have you tried?

#3 ginnywills

ginnywills

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 05 October 2012 - 04:52 PM

I don't actually remember. I used firebug to experiment with lots of things but deleted it when it didn't work.

#4 batman

batman

    Bat Learning

  • Members

  • 2027 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 05 October 2012 - 05:23 PM

Hi ginnywills
Please you can try with

Please Login or Register to see this Hidden Content



#5 ginnywills

ginnywills

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 05 October 2012 - 10:44 PM

I tried that but that does not do anything. Its not actually a drop down menu. Does that matter?

www.audaciousgroup.com

Ginny

#6 batman

batman

    Bat Learning

  • Members

  • 2027 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 06 October 2012 - 12:21 AM

Hi again
Please you can try with

Please Login or Register to see this Hidden Content


You may also use color codes there, such as

Please Login or Register to see this Hidden Content

, if you wish to use more specific colors.

#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 October 2012 - 02:35 AM

Please Login or Register to see this Hidden Content


Now the numbers in the rgba are purple. Change them to any numeric value for the color you prefer.

For more color codes:

Please Login or Register to see this Hidden Content


  • joaoreis likes this

#8 ginnywills

ginnywills

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 07 October 2012 - 03:23 PM

Thank you! That did it!

#9 ginnywills

ginnywills

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 07 October 2012 - 03:24 PM

Is there a way to make the color change depending on which page you are hovering over?

#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 October 2012 - 09:29 PM

You can precede the code with .page-id-xx where xx is the actual page ID set by WordPress.

Please Login or Register to see this Hidden Content


This code above would change the color for page 22 only.

If you want multiple pages with individual colors, you need to copy and edit the code for each. However, if you have 2 pages that will use the same color, you may prefix with .page-id-23, .page-id-27 ... which changes the color for both pages 23 and 27 to the one you desire.

#11 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 October 2012 - 09:30 PM

The topic was marked as resolved.

#12 ginnywills

ginnywills

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 08 October 2012 - 01:18 AM

Hi - sorry. Its not totally resolved!

The code you gave me works to change the color when you hover, but assigning a page id does not change just that page, it changes them all. Is there a way to have one page be pink when you hover, one be blue, etc?

#13 Danny

Danny

    Is Awesome!

  • Moderators
  • 15194 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 08 October 2012 - 11:13 AM

Hi,

The code Rob provided does indeed work and shouldn't work on all pages. Please bear in mind that the you will need to copy this custom CSS for each page you wish to have different styling on.

For example:

Please Login or Register to see this Hidden Content


Therefore, you're going to need to find all your page ID's, as these are different per site, so we can not provide them for you. To find your Pages ID, the easiest method is to use either FireBug for FireFox or Google Chromes Web Dev tool and inspect your site's body class (see image). If you view your different pages, this body classes page-id-X will change to your Pages ID.

Please Login or Register to see this Hidden Content


  • nondualit likes this

#14 ginnywills

ginnywills

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 08 October 2012 - 04:32 PM

I think I have not made my request clear. I have the following code in there now. page id 7 is the WHY page and page id 102 is the HOW page. This makes it hovers pink or blue depending on which page I am on.


.page-id-7 .navbar .navline > li > a:hover {
background-color: transparent;
color: #ff0099;
text-decoration: none;
}

.page-id-102 .navbar .navline > li > a:hover {
background-color: transparent;
color: #0099ff;
text-decoration: none;
}

What I want is for it to change to pink when you hover over WHY and blue when you hover over HOW no matter what page you are on. Is that possible?
Thanks,
Ginny

#15 ginnywills

ginnywills

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 09 October 2012 - 06:50 PM

Hello? Anyone there?

#16 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 October 2012 - 01:58 AM

Hi Ginny

Yeah you can change the colors site wide for the hover element. It looks like you have the correct code as well. Currently everything on your site is changing to pink on hover, so you've managed to put some effective Css in.

Please Login or Register to see this Hidden Content



#17 joaoreis

joaoreis

    Advanced Member

  • Members
  • 30 posts
  • LocationPorto alegre
  • Framework Version:v2.3.8
  • Country: Country Flag

Posted 29 November 2012 - 04:28 PM

Hello! I need a little help,

 

 I need to change the dropdown menu color when the mouse is over the sub options of the navbar. I've added the codes which were mentioned above, but it changes the main part of the navbar.

 

 I've also changed the color in the line code 136 /sections/navbar/style.less, but it didn't make any difference.

 

 Is there a way i can change the hover color of the navbar sub options?

 

Thanks!



#18 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 November 2012 - 04:44 PM

joareis,

 

Please open a new topic of your own and we'll address your issue there.  Thanks.







Also tagged with one or more of these keywords: navbar