Jump to content


Photo
- - - - -

Text color change when hovering over


  • Please log in to reply
9 replies to this topic

#1 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 15 April 2013 - 10:46 PM

Hi,

 

I would like my navbar links to change color when hovering over with the mouse

 

Sitelink is test.propertywealthadvisors.com.au

 

So far I have the following CSS code:

 

 

#brandnav .navbar .navline > li > a:hover { background-color:transparent;
color: rgba( 155, 130, 155, 0.9);
text-decoration:none;
}

 

 

Doesn't work. Please assist. Should look like the file attached



#2 Rob

Rob

    One Smart Egg

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

Posted 15 April 2013 - 11:14 PM

Hi,

 

Okay, this is going to be unusual at the very least. 

 

Go to Dashboard > Appearance > Menus and on the top, right corner you'll see "Screen Options". Click it to drop down a panel.  On that, you'll see "CSS Classes". Please check that box, then click Screen Options again to close the panel.

 

Now, in the menu items listed there, you can click on the right side of each menu item title to edit it. You'll now see a new field for CSS Class.

 

We're going to create a new, unique class. These instructions will be for the entire menu, but if you want, you can adjust this for each individual menu item.

 

The class we'll create is mymenu1  so please type that into the CSS Class field. Repeat it for each menu item.

 

Next, we're going to customize some CSS for that class. That will be something like

Please Login or Register to see this Hidden Content

Try that as an experiment, to see if it works. It may need some adjustment. 



#3 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 15 April 2013 - 11:26 PM

I have put the following and doesn't work

 

 

#brandnav .navbar .navline > li > a:hover { background-color:transparent;
color: rgba( 155, 130, 155, 0.9);
text-decoration:none;
}

 

I would like the hover over to be a dark blue



#4 Rob

Rob

    One Smart Egg

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

Posted 15 April 2013 - 11:31 PM

I'm sorry. You put that where? And did you follow my specific instructions?



#5 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 15 April 2013 - 11:36 PM

yeah sorry it worked although is it possible to just insert the one color i.e. dark blue

 

i changed menu1 to navmenu and forgot to change that in my css code. Works well although I dont want the transparency grey I would like the hover to be dark blue



#6 Rob

Rob

    One Smart Egg

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

Posted 15 April 2013 - 11:43 PM

You're free to change the color or the background color to anything you wish. The code I used was only an example.

 

When changing the name, please make absolutely sure the custom CSS class is something clearly unique, that couldn't be close to a term used by the system or a plugin. That's an easy path to conflicts when names of classes match.



#7 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 15 April 2013 - 11:53 PM

Thanks for that. I have changed it and it is what I am after although I don't want the grey square hover around the link text as shown in the attached file. How can I remove this? Cannot attach file to this comment for some reason?



#8 Rob

Rob

    One Smart Egg

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

Posted 16 April 2013 - 12:09 AM

If you use Firebug, as we strongly recommend, you'll be able to find this CSS:

Please Login or Register to see this Hidden Content

I found that in less than 1 minute.

 

Replace the #F2F2F2 with transparent and you'll remove the current page grey background.

 

Please note that we're not supposed to provide custom CSS for you. Firebug or Chrome's Inspection tools are very easy to use and to learn. I appreciate your understanding of our limitations.



#9 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 16 April 2013 - 12:14 AM

Sorry I try to use the development tools and can't seem to know how to use it even when reading the material on their website.

 

how can i find the css style coding for what I need on my website when it hasn't been added? What is your method? i.e. how did you find that in less than a minute? As I am still learning.



#10 Rob

Rob

    One Smart Egg

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

Posted 16 April 2013 - 12:59 AM

I use Firebug, and simply use the Firebug Cursor (looks like a rectangle with a cursor pointer in it) to point to the element I want to change. Then, I use the available levels (the line of links above the HTML code) to find the right element's code which appears in the CSS box on the right.

 

There's a ton of information about using Chrome's tools and Firebug out there to help you.