Need help? Check out our Support site, then


Awkward white bar extending past nav bar.

  1. thesmartcookiecook
    Member

    My nav bar extends beyond the header image, creating an awkward rectangle hanging off of the right edge. You can see this here. How can I get rid of this?

    The blog I need help with is thesmartcookiecook.com.

  2. thesmartcookiecook
    Member

    sorry, wrong link. try this.

  3. Which browser and version of it are you using please? I'm asking because I use Firefox 7.0.1 and I cannot see what you describe in that image you linked to. Will you please clear your browser cache and cookies and see if that changes the display for you? Your browser version can be upgraded here if required.

  4. thesmartcookiecook
    Member

    I am using the same browser as you (Firefox 7.0.1). I tried the cache thing but I'm not sure if it worked or not. My computer just kind of froze up. What does clearing the cache do?

  5. It gets rid of the data that our browser store and display. By clearing it we then know we are not viewing an older cached version of the site.

  6. thesmartcookiecook
    Member

    Well I tried it a second time and it cleared the cache, but my nav bar is still extending beyond the header image.

  7. Do you mean the Admin bar that displays at the top of our blogs when we are logged into WordPress.com? If so are you referring to the display of it on the front page of your blog or on the Admin side?

  8. thesmartcookiecook
    Member

    No I'm talking about my navigation bar that says "home, recipes & more" etc.

  9. Howdy timethief, I think thesmartcookiecook means the white rectangle where the header tabs on top are located ("Home", "Recipes & More", etc.). It's wider than the rest of the blog itself. It might have to do with the custom CSS being used.

  10. thesmartcookiecook
    Member

    Yes, that's what I mean. Thank you.

  11. I see it too, in Firefox 7.01. on the right of the blogs menu bar the white bar extends to the right of the screens span.
    (not the word press admin bar).
    Changing the browsers text size or zoom does make a difference, so I don't think its the menu selections.

  12. Aha! Now I know what you mean and I do see that too. You need CSS editing help to correct that.

  13. thesmartcookiecook
    Member

    And how do I get such help?

  14. Hang in there. one or two of CSS Gurus will be in the forums sooner or later.

  15. ...usually sometime in a 24 hours span.

  16. This thread is in the CSS forum and we have a single Volunteer as well as Staff who help with CSS editing. As thesacredpath is not on the board at this time you will have to be patient while waiting for either him or Staff to log-in and help you.

  17. thesmartcookiecook
    Member

    Okay, thanks guys!

  18. Yes, the issue is due to bad CSS changes, and it's not the only one: the sidebar is below the posts.

  19. thesmartcookiecook
    Member

    What are you talking about?

  20. Your sidebar shows up next to the posts in my Firefox but below them in my Safari. Possibly some minute miscalculation that has to do with widths, margins or padding. (Sorry: I'm not willing to check your CSS to find what's wrong.)

  21. The nav bar issue is because you have the width in #nav wider than in #wrapper. Go to #nav in the CSS and set the width to 900px, which is the value specified in #wrapper.

  22. thesmartcookiecook
    Member

    Okay, I did that, but it made it worse.

  23. Ok, add the following to the bottom of your current custom CSS.

    #nav {
    width: 900px;
    }
    
    .header {
    background-color: #FFFFFF;
    width: 900px;
    }
    
    #nav li a {
    padding-right: 5px;
    }
  24. thesmartcookiecook
    Member

    Okay, that got rid of the the white bar but now the area between the header image & post is white. It should be blue like the rest of the background.

  25. You have a few things entirely out of whack, but I'm not going to try and sort through them so here is some digital duct tape for that issue.

    #header-image {
    height: 200px;
    }
    
    #content, #sidebar {
    margin-top: 10px;
    }
  26. thesmartcookiecook
    Member

    Great :( I wish i knew how to fix all that. Well, thanks for your help anyways.

  27. Actually it seems that this theme has a couple of "shortcomings" and the nav breaks when it goes to two lines and the background color set for the nav does not expand down for the second line. That is why I added the white background color to #header, to take care of that issue if the nav goes to a second line due to a visitor's browser settings.

  28. You are welcome. Add what I gave above and it will get the gap back below the header for you.

  29. thesmartcookiecook
    Member

    Actually, the section above the posts is still white.

  30. thesmartcookiecook
    Member

    Nevermind, I fixed it!

Topic Closed

This topic has been closed to new replies.

About this Topic