Archived

This topic is now archived and is closed to further replies.

  • 0

Text color change when hovering over

Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

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

.mymenu1 a:hover {background-color:transparent;
color: rgba( 155, 130, 155, 0.9);
text-decoration: none;
}

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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


.main-nav li a:hover, .main-nav li.current_page_item > a, .main-nav li.current-page-ancestor > a {
    background-color: #F2F2F2;
}

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites