Change Width of Twenty Eleven Theme & Add Search Bar Below Navigation

  • Unknown's avatar
    bronberry · Member ·

    Hi there,

    My site is: http://bronwynmilkins.com and I have custom CSS.

    I’d like to help with two things please.

    1) Increase the width of the single column on the front page and the content pages (bronwynmilkins.com/blog)
    2) Because I want to increase the width of the single column on the front page and the content pages, I need to increase the width of the navigation menu and feature images too, to keep all my content at the same width. How can I do this?
    3) Add a search bar below my navigation menu (the menu containing ‘About’, ‘Speaking’, etc.) and in the side-column

    I currently use this code to hide the search bar:

    /*below code is to remove the search bar which was
    on the right side of the page*/
    #branding #searchform {
    display: none;
    }

    When I remove the code, the search bar appears on my navigation menu and over the existing menu tabs.

    —-

    Any help would be appreciated!

    Thank you

    The blog I need help with is: (visible only to logged in users)

  • staff-jeanpierreac · Staff ·

    Hi. Let’s try !

    Increase the width of the single column on the front page and the content pages (bronwynmilkins.com/blog)

    To do that you should widen #content area. Right now your theme gets 2/3 of the browser width for this area if this width is bigger than 800px, in other case the parameter is auto (and I recommend you not to change it). So

    #content {
width: 75%
}

    You ought take into account #page max-width = 1000px so if you make your content to grow so much, you could have visualization problems (your content could overlap your widgets area) except if you slim your widget column at the right side, that right now is a little bit less than 20%.

    2) Because I want to increase the width of the single column on the front page and the content pages, I need to increase the width of the navigation menu and feature images too, to keep all my content at the same width. How can I do this?

    Ok. So I understand you would like to widen your header and menus area to avoid your content be bigger than it. Isn’t it?

    There is no problem about that, because both the header and the #main div have the same width as your #page. And you content and your widget column width are expressed in %. As content is floated to the left and the #secondary div is floated to the right, these two areas could overlap themselves if they sum more than 100%, but they won’t be bigger than the header (Except if you define a width>100% for #content or #secondary).

    In any case, if you would like to have more space for your #page, you could get it with a bit of CSS magic:

    #page {
    max-width: 1500px;
}

    3) Add a search bar below my navigation menu (the menu containing ‘About’, ‘Speaking’, etc.) and in the side-column

    Mmm. You could try to start from this CSS code. Then you can modify bottom values (the big negative value, the down in the screen) and right, to adjust the horizontal position. And, of course, we need to display it :)

    #branding .with-image #searchform {
    bottom: -70px;
    right: 4%;
}

    I hope that helps you. Enjoy blogging!

  • The topic ‘Change Width of Twenty Eleven Theme & Add Search Bar Below Navigation’ is closed to new replies.