Text transform to underline when hovering page link in primary navigation menu

[Genesis Child]

Hi guys,

I have been trying to find the line of code to alter to allow my page link text in the primary navigation menu to transform to underlined when hovered.

So far I have found the CSS to change the colour of the navigation bar, to change the colour of the page link text on both regular and hover, and also how to change the text to underlined for regular - BUT how do I make it transform to underline on hover? So not underline normal and then when I hover it transforms to underlined?

Is there some CSS I have to add? or can I just alter something that is already there?

Thanks

[nutsandbolts]

Can you post a link to your site? It's always easier to help if we can see what you see.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Genesis Child]

Hi nuts and bolts,

and thanks for you rapid response.

If you look at the studiopress navigation bar at the top of this forum and you hover over the page options

STUDIOPRESS 101
SHOP FOR THEMES
RESOURCES »
MY STUDIOPRESS

You will see they change colour from grey to white. I am trying to set my site up so that when you hover over the page options the text transforms to underline instead of changing colour. I have figured out how to stop it from changing colour by just making the css code for the colour hover change the same as the regular colour.

but how do I make the text transform to underline on hover

I hope this is adequate enough of an explanation. I could provide my site url but it is brand new and I am trying to minimise views at the moment so as not to skew the analytical data and because I have not even launched the brand yet and the content is commercially sensitive...

but I will if I have to...

Thanks

[nutsandbolts]

I understand what you're saying, but without being able to see what CSS rules are currently in place, it will be difficult for anyone to help you. If you check the box to "set as private reply" and provide the URL, no one will be able to see it except me and the other moderators - it will show as a blank blue box to everyone else.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Genesis Child]

Does it help at all that I am just running the stock standard Genesis Sample Child Theme over the Genesis Framework?

If not please let me know and I will private reply with my url - I appreciate the assistance and don't want to be awkward lol

Thanks again

[nutsandbolts]

That is somewhat helpful, but again, since you've made changes to the stylesheet as you mentioned in your first post, no one can tell you for sure since the CSS changes needed may be specific to your site.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Genesis Child]

This reply has been marked as private.

[nutsandbolts]

Okay, scroll to the Primary Navigation section of the stylesheet and find this:

.nav-primary a:hover,
.nav-primary .current-menu-item > a {
	color: #fff;
}

then change it to this:

.nav-primary a:hover,
.nav-primary .current-menu-item > a {
	color: #fff;
	text-decoration: underline;
}

That will give you the underline on hover.

And I clicked back and forth between your page and the homepage, so no bounced visits here. 🙂

The site looks nice so far!

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Genesis Child]

WOW! So simple! You - are - a - LEGEND!

This makes so much sense now. A total AHA moment. I am slowly bit by bit learning how all this stuff works and this has opened my eyes up to understanding more of how these Stylesheets work.

Thank you so much for helping me with this, and thank you so much for being empathetic of my bounce rate.

You are a really outstandingly efficient, helpful, and empathetic person.

I'm really stoked you helped me out with this.

Again thank you sooooo much, and thank you for the kind words about how my site is looking thus far, it means allot to me 😉

Genesis Child 😉

P.S. Oh obviously I have applied the code and it works PERFECTLY! 😉 tada!

[Genesis Child]

P.S.S.

I'm having a good look at your website now. WOW! It's really cool. I like how the when you scroll down the home page it has those transparent sections where you can see the background image between the content containers.

Very nice.

Thanks again for your help I will mark this resolved 😉

[Author]

Posts