WordPress.org

Forums

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

  1. JDK1313
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year ago #

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

  5. batharoy
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year ago #

    Perfect! Thank you so much!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic