Full Width Header

  • Resolved jefflip

    (@jefflip)


    12 years, 12 months ago

    Hi,

    I’m trying to customize my first wordpress site and I’ve run into a problem I can’t seem to solve. Here’s a link to the site I’m working on Lifecycle WordPress Test.

    The theme I’m using can be found here.

    The issue I’m facing is that in the header.php file there is a style class called ‘wrap’ that defines the max-width of all of the other style classes to be 940px.

    What I’d like to do is have the header class ignore this max-width setting so that the background image I’ve set for the header would span across the top of the entire page.

    I moved the wrap style class below the header class in the header.php file which worked until I installed a child theme so that I could customize the rest of the theme. Now if I try and edit the header.php file in the original/parent theme I get an error.

    Any suggestions/help would be much appreciated.

    Thanks,

    Jeff

Viewing 7 replies - 1 through 7 (of 7 total)

  • The body has the speckled background, and wrap has the header image.

    Just a suggestion, the header is wrapped inside the div container, set the header image as the container background image instead, and just repeat across.

    You could remove the wrap image and set the background transparent!

    #container {
   background-image: url("images/irongrip.png");
   background-repeat:repeat-x;
}
#wrap {
   background: transparent;
}

    HTH

    David

    Thread Starter jefflip

    (@jefflip)

    Thanks for the help.

    Your trick of adding the background image to the container instead of the header works great.

    Jeff

    Great,
    Mark this as resolved please!

    David

    Hi David

    I have a similar question, but my skill level sub-cedes Jefflip!

    I’ve been building my first WP site using Weaver II theme. All I want to achieve at this stage is a header/menu and footer area that goes the full width of the screen, regardless of resolution of the screen etc.
    eg: seekingalpha.com is a perfect example.

    I dont really understand most of the techy stuff you guys mentioned above im afraid! Any comments would be gracefully received.

    Is this easily achievable?

    Morgson

    I need to remove the CC pic from behind my header and the extra space underneath. lcrprayer.com is the sight.

    I’m sorry but as you are using a commercial theme, you need to seek support from the theme’s vendors.
    https://themekraft.com/support/

    And next time, please post your own topic.

    I had a similar problem with trying to adjust the max-width on the weaver II theme. Turns out it was a free theme that had abstracted alot of the styles so the were inline. Therefore proving difficult to override unless you bought a licence to the full theme which included the styles in a stylesheet as you would expect.

    Probably wasted about an hour figuring that out.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Full Width Header’ is closed to new replies.