Jump to content
Sign in to follow this  
anlinares

Navigation Background Image

Recommended Posts

anlinares

I've exhausted my limited coding skills. I've done something a little different but similar in Platform Pro but couldn't get that code to work, either. I'm just trying to get a background image on hover in my nav menu and get rid of the gray background color there at the moment. Site is in its early stages - www.angiebates.com/home Here is the hover bg image for the menu: [img src="http://www.angiebates.com/images/nav_bg1.png"] Still playing with spacing and sizing at the moment so may need to resize the image or play with the spacing on the menu to make it work. Just want to know this will work before I move on! Thanks!

Share this post


Link to post
Share on other sites
James B
Someone sent me this a little while ago when I had a similar issue. Mine was to change the color but hopefully you can adapt it to change the image.... [code].main-nav li:hover, .main-nav .current-page-ancestor a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .sf-menu li li, .sf-menu li li li { background-image: url(http://angiebates.com/images/nav_bg1.png); }[/code] Hope it works...

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
anlinares
Thanks, jamieb23. I was just playing with it before I received your answer and got the following to work: [code] .main_nav li:hover { background-color: transparent; background-image:url('http://www.angiebates.com/images/nav_bg1.png'); } [/code] Still need to play around with my sizing and spacing but I think that does the trick. I'll hang on to your code, too, just in case.

Share this post


Link to post
Share on other sites
anlinares
I guess it's the same code with a few more selectors! I added those to cover my bases. I've got the images working now but my alignment is a little off. Anyone have an idea on how to get my circles directly over (or I guess I should say, under) my text? [url]www.angiebates.com/home[/url] Here's my code, thus far: [code]#nav a { font-family: "skippy-sharp"; font-size: 28px; background:none !important; } #nav li a:hover { font-family: "skippy-sharp"; font-size: 28px; background:"http://www.angiebates.com/images/nav_bg1.png" !important; } /* Spacing Nav Menu */ #nav ul li { margin: 0px -5px; } #nav ul ul { margin: 0px -5px; } #nav li a { margin: 0px -5px; } .main_nav li:hover, .main-nav .current-page-ancestor a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .sf-menu li li, .sf-menu li li li { background-color: transparent; background-image: url('http://www.angiebates.com/images/nav_bg1.png'); background-repeat:no-repeat; } #menu-item-50, #menu-item-63, #menu-item-64, #menu-item-65, #menu-item-66, #menu-item-67, #menu-item-68 { height: 80px; width: 140px; } [/code]

Share this post


Link to post
Share on other sites
anlinares
Nevermind. Sometimes I think all it takes is giving up and asking on the forum before I can figure it out myself! Just needed to center align the text.

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  

×