Jump to content
Sign in to follow this  
jaysondemersgmailcom

Make nav icons change color on hover

Recommended Posts

jaysondemersgmailcom    0
jaysondemersgmailcom

Hey guys, I have been toying with the CSS for the past hour and can't figure out how the hell to change the color of the top nav on hover. Can someone please clue me in to which variable in the CSS controls the hover color? Thanks, -Jayson

Share this post


Link to post
Share on other sites
bryan-hadaway    3
bryan-hadaway

Please provide a link to your site and I'll have a look. Thanks, Bryan

Share this post


Link to post
Share on other sites
bryan-hadaway    3
bryan-hadaway

Okay, it appears that you've modified it already, can you please post the CSS you're using to attempt to change the menu and are you posting the code in Custom CSS? Thanks, Bryan

Share this post


Link to post
Share on other sites
jaysondemersgmailcom    0
jaysondemersgmailcom

I've tried changing various variables within the following CSS code. And I have not tried anything within the Custom CSS code. /* MAIN NAVIGATION */ #nav { font-size: 13px; background: transparent url(images/nav-bg.png) no-repeat 0px -1px; height: 38px; margin-bottom: 16px; } #nav ul{ list-style: none; display: block; margin: 0; padding: 0px; width: 750px; float: left; } #nav ul li{ font-weight: bold; margin:0; padding: 0px; float: left; background: url(images/navdivider.png) no-repeat right top; } #wrapper #nav ul.dropdown li a.home, #wrapper #nav ul.dropdown li a.home:hover{ background-color: transparent; background-position: 21px 5px; background-repeat: no-repeat; text-indent: -300em; width: 25px; border-left: none; position:relative; z-index: 10; padding: 9px 22px 9px 20px; } #nav ul.dropdown li a.home:hover, #nav ul li a.home:active{ cursor: pointer; margin:0; border:none; } #nav ul li a{ padding: 9px 22px 9px 20px; text-decoration: none; text-shadow: #ddd 0px 1px 0px; color: #000; display: block; } #nav ul li a small{display: none;} #nav .current_page_item a, #nav .current_page_item a:hover, #nav li a:hover, #nav li a:active, #nav .current_page_ancestor a, #nav .current_page_ancestor a:hover{ margin-left: -1px;margin-right: 1px;text-shadow: #000 0 -1px 0px; padding: 9px 21px 9px 21px; } #nav .current_page_item a, #nav .current_page_item a:hover, #nav .current_page_ancestor a, #nav .current_page_ancestor a:hover{ text-decoration: none; background: #2a2a2a url(images/nav-sprite-default.png) repeat-x 0 -72px; color: #fff; } #nav li a:hover{ color: #fff; background: #b1b1b1 url(images/nav-sprite-default.png) repeat-x 0 0px; } #nav li a:active{ color: #fff; background: #2a2a2a url(images/nav-sprite-default.png) repeat-x 0 -36px; }

Share this post


Link to post
Share on other sites
bryan-hadaway    3
bryan-hadaway

Okay, that's a problem. We'll need to restore the CSS you altered and then start over from scratch in Custom CSS so that we have complete control, also you don't want to hard edit files like that because it makes it very difficult to upgrade in the future. What exact version of iBlogPro are you using and I'll get the replacement code. You can find this info from Appearance > Themes. Thanks, Bryan

Share this post


Link to post
Share on other sites
jaysondemersgmailcom    0
jaysondemersgmailcom

I'm using 4.0.6. I tried to install 4.1.5 a week or so ago but it broke my site so I had to revert to 4.0.6. If we do a CSS replacement, will I lose my custom color scheme? All the CSS work was done by a designer I hired. I'm not great with CSS.

Share this post


Link to post
Share on other sites
bryan-hadaway    3
bryan-hadaway

Oh no, this is trickier than I thought. If your designer will accommodate, all the CSS should be done in: Theme Options > Custom Code > Custom CSS and at least for now on. Upgrading wouldn't work, because anything your designer did will be overwritten by the new theme and set back to default. This is getting a bit messy now. If your designer is still around, I would recommend consulting with them first to make sure all this work you've paid for is done properly. If they're MIA please describe to me exactly what you want your menu to do on hover/rollover and we'll have to just go from how things are. Thanks, Bryan

Share this post


Link to post
Share on other sites
jaysondemersgmailcom    0
jaysondemersgmailcom

Dang. It was a contract job so I'm probably looking at spending more money. For now I'm not so concerned with having the ability to upgrade the theme unless there are some must-have features in later releases. So if we can band-aid fix this with the current setup that'd be great. Currently there is a barely noticeable effect when hovering the mouse over the top nav. Whatever it is doesn't look good. Take a look at this page: http://www.audiencebloom.com/contact-us/ The drag-and-drop sidebar on the right has a hover effect where it says "Connect with us." That same effect would be just fine along the top nav. Is that easily implementable?

Share this post


Link to post
Share on other sites
bryan-hadaway    3
bryan-hadaway

Try adding this to your Custom CSS: `#nav li a:hover{background:#000}` Thanks, Bryan

Share this post


Link to post
Share on other sites
jaysondemersgmailcom    0
jaysondemersgmailcom

Perfect. Problem solved, many thanks Bryan.

Share this post


Link to post
Share on other sites
bryan-hadaway    3
bryan-hadaway

Yay! I love it when things just work. Thanks, Bryan

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×