blog width & navigation bar adjustment

  • Author
    Posts
  • #2760155

    lindsaymbehr
    Member

    My navigation bar currently has spaces between each image and I don’t know what part of code should be adjusted to fix this issue. I also would like to adjust the width of the entire blog and have it be fixed and not resize when the window is sized down. For reference, here is the look I am going for: http://imgur.com/a/gOaAS

    The blog I need help with is capturesinbeauty.wordpress.com.

    #2760231

    kathrynwp
    Staff

    My navigation bar currently has spaces between each image and I don’t know what part of code should be adjusted to fix this issue.

    You’ve set a width on the menu item in your custom CSS that’s wider than the background image itself:

    #menu-item-845 a {
        background: transparent url("https://capturesinbeauty.files.wordpress.com/2016/10/navbar1.jpg") no-repeat scroll left top;
        text-indent: -9999px;
        width: 232px;
    }

    If you make that widths match the exact image width, it should work better.

    If you put the above image URL into a browser’s address bar, you’ll see that it’s 180px wide.

    So you can adjust the CSS like this:

    #menu-item-845 a {
        background: transparent url("https://capturesinbeauty.files.wordpress.com/2016/10/navbar1.jpg") no-repeat scroll left top;
        text-indent: -9999px;
        width: 180px;
    }

    Then you’ll need to also override the padding around each menu item set here in the theme:

    #access a {
        padding: 0 1.2125em;
    }

    You can do that by adding this to your custom CSS:

    #access a {
      padding: 0;
    }

    Be sure to put that within your existing media query, so above the very last closing curly quote.

    The result should look like this:

    https://cloudup.com/cc4j5_yyKZH

    I also would like to adjust the width of the entire blog and have it be fixed and not resize when the window is sized down.

    Twenty Eleven is responsive, so it automatically adjust to different screen sizes, making it readable on mobile devices. If you set a fixed width, your blog won’t be readable on phones and tablets, and a significant chunk of visitors won’t be able to read your content properly, so I don’t recommend it.

    #2760282

    lindsaymbehr
    Member

    Thank you so much!!! Ok, I believe I have updated everything properly. I understand what you mean about sizing it down. The only thing that bothers me about it being this way is that when I size down the window, the navigation bar breaks up into two lines. Is there a way for the navigation bar to size down as the window size is reduced?

    Currently the navigation bar is not centered and I am not sure what I need to add to correct it. Is there something I can do about the distance between my main content column and the sidebar to bring them closer together? I am happy to reduce the entire width of the blog if that will close that gap up a bit.

    #2760286

    kathrynwp
    Staff

    I’ll answer your questions separately. If you have any new questions, please start a new thread instead of continuing to add them here. Thanks.

    Currently the navigation bar is not centered and I am not sure what I need to add to correct it.

    I used a browser inspector to see that there’s some right padding being added to the main menu. If you zero that out, the navbar should be centered:

    #branding .only-search + #access div {
      padding-right: 0;
    }

    Is there something I can do about the distance between my main content column and the sidebar to bring them closer together? I am happy to reduce the entire width of the blog if that will close that gap up a bit.

    Try removing this custom CSS you added earlier:

    #page { 
      max-width: 1120px; 
    }

    By widening the overlal page you also widened the gap between columns, greating an especially large gap next to the photo in your post.

    #2760288

    kathrynwp
    Staff

    The only thing that bothers me about it being this way is that when I size down the window, the navigation bar breaks up into two lines. Is there a way for the navigation bar to size down as the window size is reduced?

    I’d suggest widening your media query a bit. So try changing this:

    @media screen and (min-width: 900px) {

    to this:

    @media screen and (min-width: 1065px) {

    That should prevent your modified menu from breaking onto two lines as it sets the breakpoint a bit earlier.

    You may also want to add some other menu styles in another media query for smaller screens.

    #2760299

    lindsaymbehr
    Member

    Great! Blog width is better now. I appreciate all your help! I would still like to reduce the white space on either side of the sidebar if possible. Do you know if that can be adjusted or is that set with the theme of the blog?

    #2760304

    kathrynwp
    Staff

    The main column width is set in this CSS:

    #content {
        width: 58.4%;
    }

    You can increase that with custom CSS to widen the width, which makes the gutter (space between columns) narrower. For example:

    #content {
      width: 62%;
    }

    You can adjust the percentage as you like.

    #2760331

    lindsaymbehr
    Member

    Thank you so much!

    #2760334

    kathrynwp
    Staff

    My pleasure! I’ll mark this thread as resolved but feel free to start a new one if you need help with anything else.

The topic ‘blog width & navigation bar adjustment’ is closed to new replies.