hover color behind header widget navigation

Tagged: hover effect, navigation css

This topic has 9 replies, 2 voices, and was last updated 10 years, 5 months ago by Eric.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
November 11, 2013 at 9:58 am #8814
Greg P
Customer
This might be straightforward css, but I’m wondering if anyone knows how to add the hover effect to the navigation? Similar to how it’s done on the studio press executive theme. I like the simple nav of epik but I’d like to jazz it up a bit, especially with a white header.

Thanks!

Greg
November 11, 2013 at 11:58 am #8818
Eric
Customer
It’s already there you just have to adjust the effect. Here is an example – https://appfinite.com/topic/image-fade-on-rollover/#post-8755

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
November 11, 2013 at 6:52 pm #8822
Greg P
Customer
Eric, so what you’re saying is that same css is what’ll trigger the colors behind the navigation to create somewhat of a button effect (right header widget, custom menu)? I didn’t know that…I’ll see what I can do.
November 11, 2013 at 7:29 pm #8823
Greg P
Customer
Here’s the code for the nav I’m talking about. I added a background color for the hover, but seems like what I’d need to do set a height so it fills up the entire header, vertically. Which would be 108px…but I’ve tried various things (i.e. background-height) with no luck. Any ideas?:

/* Site Header Navigation
——————————————— */

.site-header .genesis-nav-menu a {
color: #990000;
}

.site-header .genesis-nav-menu .current-menu-item > a {
color: #990000;
}
.site-header .genesis-nav-menu a:hover {
color: #ccc;
background: #990000;
}

.site-header .genesis-nav-menu .sub-menu .current-menu-item > a {
color: #ccc;
}
November 11, 2013 at 9:10 pm #8829
Eric
Customer
I’m pretty sure I could get it working, but I would need a link to your site in order to look at everything.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
November 11, 2013 at 10:32 pm #8832
Greg P
Customer
Okay, but that’s making it too easy for me. I like to get in there and mess around…but I’ll take your help if you’re willing 🙂

Here’s where I’m at: http://www.gregpayette.com

You can hover over the top nav and see the buttons…but I want it to fill the header, vertically when I hover.

Thanks Eric.
November 12, 2013 at 11:15 am #8836
Eric
Customer
First you’ll need to remove the padding for the top and bottom of the .site-header which should be around line 1908 in your css –
```
.site-header .wrap {
    padding: 0;
}
```
Then adjust the padding for the .genesis-nav-menu around line 2032 (example below) –
```
.genesis-nav-menu a {
    border: medium none;
    color: #990000;
    display: block;
    font-weight: 400;
    padding: 30px 13px;
    position: relative;
}
```
Next you’ll notice you need some padding on top of .title-area directly –
```
.title-area {
    float: left;
    font-family: 'Questrial',sans-serif;
    font-weight: 700;
    padding: 20px 0 0;
    width: 360px;
}
```
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
November 13, 2013 at 7:44 am #8850
Greg P
Customer
Eric, I haven’t gotten a chance to try it yet, but that is very, very cool of you to take your time to figure it out. Thank you so much…for that and all the help you provide in this forum.

Greg
November 27, 2013 at 7:34 pm #9182
Greg P
Customer
Eric, just wanted to let you know it worked perfectly. Awesome. Thank you again. -Greg
November 27, 2013 at 9:20 pm #9187
Eric
Customer
You’re Welcome Greg!

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘hover color behind header widget navigation’ is closed to new replies.