Jump to content
anlinares

1st Attempt at Navigation with Image Backgrounds...

Recommended Posts

anlinares

www.philfor4.com/home I'm making my first attempt at a main navigation with a background image and rollover background image. At this point, you can tell what I'm trying to accomplish by looking at the site but it is obviously wrong at this point. My text is not properly aligned and is moving on rollover. Here is my code.... I know it's probably bad. Just piecing together things trying to make it work, but I give up..... without your help, that is! #primary-nav { background-image: url(/images/nav_bg.png); height:37px; } #primary-nav ul, #primary-nav li { width:70px; height:37px; margin-top: -4px; } #primary-nav ul ul a, #primary-nav li:hover > a, #primary-nav ul ul :hover > a { background-image: url(/images/nav_hover_bg.png); height:37px; width:70px; } Can we edit this code to make it work or is there an easier method? I would love a plugin but couldn't find one that would work.

Share this post


Link to post
Share on other sites
catrina
Here's an edited version of the code above: [code]#primary-nav { background-image: url('/images/nav_bg.png'); height:37px;} #primary-nav ul, #primary-nav li { width:70px; height:37px; margin-top: -4px;} #primary-nav ul ul a, #primary-nav li:hover a, #primary-nav ul ul :hover a { background-image: url('/images/nav_hover_bg.png'); height:37px; width:70px;}[/code] For the image URLs, try adding the full image URLs.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
anlinares
Thanks, Catrina! I'm still getting the text spacing issues. Take a look and let me know what you think for this.

Share this post


Link to post
Share on other sites
catrina
It could be padding issues (from what I see). Can you post all of the custom code you have?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
anlinares
Just getting started so I don't have too much... /* Remove Pagelines Leaf */ #cred {display: none;} /* @ Remove Line Under Feature */ .post.fpost .entry, #soapbox .fboxinfo, #feature-footer.nonav { border-top:none; } /* @ Remove Line Under Nav */ #nav_row.main_nav, ul.sf-menu ul li, .fpost { border-bottom: 0px; } /* Nav */ #primary-nav { background-image: url('http://www.philfor4.com/images/nav_bg.png'); height:37px;} #primary-nav ul, #primary-nav li { width:70px; height:37px; margin-top: -4px;} #primary-nav ul ul a, #primary-nav li:hover a, #primary-nav ul ul :hover a { background-image: url('http://www.philfor4.com/images/nav_hover_bg.png'); height:37px; width:70px;}

Share this post


Link to post
Share on other sites
Danny
Would it be possible for you to post a screenshot of how you want it to look?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
anlinares
Ideally, this: http://philfor4.com/images/draft_nav.jpg With the blue on the rollover and the active. I'm quite far away from this at the moment, I suppose! I have just wanted to try a graphic nav in Wordpress but haven't attempted. Thought this would be a fairly simple application to learn with but I'm finding it challenging! Thanks for your help!

Share this post


Link to post
Share on other sites
anlinares
I added pages and updated the sizing of the nav bar to match the draft. Same text alignment issues... #primary-nav { background-image: url('http://www.philfor4.com/images/nav_bg.png'); height:59px;} #primary-nav ul, #primary-nav li { width:137px; height:55px; margin-top: -5px;} #primary-nav ul ul a, #primary-nav li:hover a, #primary-nav ul ul :hover a { background-image: url('http://www.philfor4.com/images/nav_hover_bg.png'); height:55px; width:137px;}

Share this post


Link to post
Share on other sites
Rob
Somewhere in some custom code, this is affecting you. [code]ul#menu-main-menu li:hover > a { background-position: 5px center; background-repeat: no-repeat; padding-left: 23px; }[/code] The left padding is pushing the menu over. Try adjusting this to 5 and see what happens. Also, I think the background-position may also be causing each menu item to center. Check the plugin you have as that's where that CSS is coming from... custom menu images. I think you're going to have to get much more specific in the CSS about the actual text position.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
anlinares
Well I wasn't using that plugin (couldn't figure out how to make it work correctly... user error I am sure) so I just deactivated it but there are still lots of issues. Instead of trying to make what I have work, let me start over. What is the best or proper or easiest way to insert a background image behind navigation with a rollover background image? Doesn't seem like this should be too hard but certainly is!!! Thank you!

Share this post


Link to post
Share on other sites
catrina
The best proper way is with CSS. The code is supposed to look like this: [code]SELECTORGOESHERE {background-image: url('http://BACKGROUNDIMAGE');} SELECTORGOESHERE a:hover {background-image: url('http://BACKGROUNDHOVERIMAGE')}[/code] This code is for individual navigation menu items, not the navigation background overall. The selectors (like div#main-menu li.menu-item) can be determined using Firebug (http://getfirebug.com)

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
anlinares
Great! That looks a lot better - both in code and on the site. Still having trouble with the text alignment, though. Any ideas on how I can target the text and get it to stay put? My code at the moment looks like this: #primary-nav { background-image: url('http://www.philfor4.com/images/nav_bg.png'); height:59px;} #menu-item-37 {background-image: url('http://www.philfor4.com/images/nav_bg.png'); height:55px; width:137px;} #menu-item-37 a:hover {background-image: url('http://www.philfor4.com/images/nav_hover_bg.png'); height:55px; width:137px; background-repeat:no-repeat;} #menu-item-54 {background-image: url('http://www.philfor4.com/images/nav_bg.png'); height:55px; width:137px;} #menu-item-54 a:hover {background-image: url('http://www.philfor4.com/images/nav_hover_bg.png'); height:55px; width:137px; background-repeat:no-repeat;} #menu-item-53 {background-image: url('http://www.philfor4.com/images/nav_bg.png'); height:55px; width:137px;} #menu-item-53 a:hover {background-image: url('http://www.philfor4.com/images/nav_hover_bg.png'); height:55px; width:137px; background-repeat:no-repeat;} #menu-item-36 {background-image: url('http://www.philfor4.com/images/nav_bg.png'); height:55px; width:137px;} #menu-item-36 a:hover {background-image: url('http://www.philfor4.com/images/nav_hover_bg.png'); height:55px; width:137px; background-repeat:no-repeat;} #menu-item-58 {background-image: url('http://www.philfor4.com/images/nav_bg.png'); height:55px; width:137px;} #menu-item-58 a:hover {background-image: url('http://www.philfor4.com/images/nav_hover_bg.png'); height:55px; width:137px; background-repeat:no-repeat;} #menu-item-52 {background-image: url('http://www.philfor4.com/images/nav_bg.png'); height:55px; width:137px;} #menu-item-52 a:hover {background-image: url('http://www.philfor4.com/images/nav_hover_bg.png'); height:55px; width:137px; background-repeat:no-repeat;} #menu-item-51 {background-image: url('http://www.philfor4.com/images/nav_bg.png'); height:55px; width:137px;} #menu-item-51 a:hover {background-image: url('http://www.philfor4.com/images/nav_hover_bg.png'); height:55px; width:137px; background-repeat:no-repeat;}

Share this post


Link to post
Share on other sites
Dominik
#primary-nav ul.main-nav li a { color: #0067B1; text-align: center; padding-top: 20px; } #primary-nav ul.main-nav li a:hover { color: #0067B1; text-align: center; padding-top: 20px; }

Share this post


Link to post
Share on other sites
anlinares
Awesome! Thanks, monster! I'm almost there. The text is exactly where I want it but on rollover it shifts right. Any idea how to fix this? Thank you! Thank you!

Share this post


Link to post
Share on other sites
anlinares
GENIUS! You are awesome! One more thing and I'll leave you alone... ;) How can I get the current page to stay highlighted with the rollover state bg image. Make sense? So that if you are on the homepage the home button stays in the active state....

Share this post


Link to post
Share on other sites
Rob
The key will be the active state. Check this for some guidance: http://www.w3schools.com/cssref/sel_active.asp I suggest this because none of your CSS deals with the active state of the hover. Active state means that if the person is on the page after clicking it, a specific set of conditions about that link remain 'active'. If someone visits a Contact link, and is now on the Contact page, the color or background should remain constant while on that page.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
anlinares
Oh, okay. I thought active was only when the button was being pressed. I have added the active state to each button (see below - same code as hover state) but the background does not stay on the blue image like I was hoping for. Each of my menu items are now style liked this (with different item numbers for each one, of course): #menu-item-37 {background-image: url('http://www.philfor4.com/images/nav_bg.png'); height:55px; width:137px;} #menu-item-37 a:hover {background-image: url('http://www.philfor4.com/images/nav_hover_bg.png'); height:55px; background-repeat:no-repeat;} #menu-item-37 a:active {background-image: url('http://www.philfor4.com/images/nav_hover_bg.png'); height:55px; background-repeat:no-repeat;}

Share this post


Link to post
Share on other sites
Rob
I think it's a bit more than just copying hover to active. There should be something in there to say it should remain static when it's active.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
anlinares
Got it! After some searching, I learned that WP assigns the current menu item it's own class. So inserting the following code did the trick: #primary-nav .current-menu-item a {background-image: url('http://www.philfor4.com/images/nav_hover_bg.png'); height:55px; background-repeat:no-repeat; color: #fff !important;} Thanks everyone for your help!!!

Share this post


Link to post
Share on other sites
Rob
Glad you found that!

Former PageLines Moderator, Food Expert and Raconteur

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


×