Support » Themes and Templates » Help Moving Nav Bar

  • hi all-

    I’m trying to help a friend get their template set up. The header image is larger than it’s supposed to be (default is too small). We need to get the nav bar moved down below the image. I’ve gone through the css file but I can’t figure out what to move. Any help greatly appreciated!

    The site is: lifeonpurposeblog.org

    Here’s a pastebin of the css: http://pastebin.com/FmLzXZ22

Viewing 10 replies - 1 through 10 (of 10 total)
  • I think you’ve got three options here:

    1. Make the logo smaller, so the nav lines up in the pink bar.
    2. Adjust the background image on the body (http://www.lifeonpurposeblog.org/wp-content/themes/OcenolisMagazine/OcenolisMagazine/images/header.gif) to reflect the larger logo.
    3. Take away the clear:both on <div id=”top”></div> to make the navigation float next to the logo.

    Thread Starter clb2196

    (@clb2196)

    Oh man. Now I feel dumb. I saw the header image, but I didn’t realize it had the white at the top, since I was viewing it on a white background. Duh. I’ll see if I can change that easily. Thanks!

    Thread Starter clb2196

    (@clb2196)

    Ok, that part is fixed (god bless photoshop, and I had to change the color anyway). But the links still aren’t in the right spot, now, and it look like the image in partially cut off? Thanks so much for taking the time to help!

    You still need an extra 47px of white space added to that image.

    The nav links are positioned relative to the logo. They’re behaving exactly like they should. Either the logo is too large or the background image that creates that pink bar and white top is too short, it all depends on how you want to look at it. I assume you don’t want to change the size of the logo.

    So open up the background image file again in photoshop and change the canvas size to 47px taller than it is currently. Make sure the image is anchored to the bottom. Save the image, upload and overwrite the old one, and you should be good to go.

    Thread Starter clb2196

    (@clb2196)

    Sorry if I’m being dense here. I made it 47 px bigger and it doesn’t solve the problem. The logo is still in the same spot, so the links are still in the wrong spot. Do I need to change the relationship somewhere between the links and the logo?

    I think this one is a little complicated because there are a lot of ways to look at it.

    The background-color on the nav bar is a part of a background image of the body of the page. That’s not a great way to do things, because of this exact problem.

    The logo and the nav bar are behaving exactly the way they should, since the logo is pushing these nav items down further than where the pink color is positioned on the background-image. Either the logo needs to shrink or the background image needs to grow. If you play around with those for awhile I think you should be able to get it right.

    Thread Starter clb2196

    (@clb2196)

    maybe that’s where the confusion is. The buttons are *above* the pink nav bar right now, not below it. So maybe the background image needs to shrink? But how do I determine how much?

    I must have been seeing a cached version of the page before. I didn’t see that. You’re right maybe the background image needs to shrink now.

    Thread Starter clb2196

    (@clb2196)

    Ok that makes sense then 🙂 Is there a way to figure out how much to shrink it then? Where did you get the 47 pixels number before?

    My best guess at this point is 60px. I inspected the element in chrome and added a line of code that said “background-position-y: -60px” and everything lined up okay.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Help Moving Nav Bar’ is closed to new replies.