WordPress.org

Ready to get started?Download WordPress

Forums

Techozoic Fluid
Make header 1200px wide and 120px tall? (8 posts)

  1. JDK1313
    Member
    Posted 6 months ago #

    I am trying to make the header and navigation bar wider than the rest of the page. We are trying to mimic our non WP site. http://www.emsciences.com, our blog is

    I have tried changing in My Custom CSS but it is not changing anything. Suggestions?
    Thanks!

  2. batharoy
    Member
    Posted 6 months ago #

    Your page has a width attribute set, that limits the header width. This code will do what you want but you will need to adjust your columns margin or padding as this will also effect them.

    #page {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #header {
        width: 100%;
        margin: 0;
        padding: 0;
        background-size: cover;
        height: 120px;
    }
  3. JDK1313
    Member
    Posted 6 months ago #

    Thank you. I have the header showing full width and I changed the column widths in the techozoic settings but it is still spanning across the page with a weird blank down the middle right side. Do I need to change the margins in the css?

  4. JDK1313
    Member
    Posted 6 months ago #

    I tried changing the page margin but nothing seems to be different.

  5. batharoy
    Member
    Posted 6 months ago #

    I tried keeping the column widths and spaces as close to the original page.

    #l_sidebar {
        width: 22%;
        margin: 5% 2% 0 4%;
        padding: 0;
    }
    #r_sidebar {
        width: 23%;
        margin: 5% 1% 0 1%;
        padding: 0;
    }
    #content {
        width: 44%;
        margin: 0 1% 0 1%;
        padding: 0;
    }
  6. JDK1313
    Member
    Posted 6 months ago #

    Great thank you! To get the left margin set in a bit more, which number do I change? The 1%, 0 or other 1%? Or do I need to change the right side bar to bring everything in? I've tried playing around with the numbers but haven't seen more of an indent into the page.

  7. batharoy
    Member
    Posted 6 months ago #

    margin: TOP RIGHT BOTTOM LEFT

    If you add the widths + left margin + right margin you end up with 100%.
    If you want to add to one you will need to take from another.

  8. JDK1313
    Member
    Posted 6 months ago #

    Perfect! Thank you so much!

Reply

You must log in to post.

About this Theme

About this Topic