WordPress header background to be full width

[rebecca]

Hi there,
I’m new to wordpress and am having issues trying to get the white background behind my header to stretch the full width of the screen like the top section and footer do.

My site is http://www.mcswingin.com

If anyone has any tips to help achieve this, it would be greatly appreciated!

Thanks.

[chrisburton]

I can’t even connect to it.

[rebecca]

I can connect on my phone and other computers, I’m not sure why it isn’t working for you.

[chrisburton]

I checked via terminal and I’m getting a timeout error. Not sure what’s going on.

[chrisburton]

Now it’s working. Give me a second.

[chrisburton]

The reason it is not working is because you need to set max-width: 100%; on the #header and remove the padding on all the body styles. Or rethink where you apply your layout wrapper.

[rebecca]

Thanks Chris.
I seem to keep missing padding somewhere in my code as the white area has become larger but not full width. Ill find it eventually!
Also do you have any tips to get my logo centered above my nav?

Thanks again for your help!

[chrisburton]

Look in your media queries for the body padding. I’m currently not able to troubleshoot further (I’m on my iPhone) but give me a few hours if no one else has come along.

[chrisburton]

There’s a really big problem with your website. It takes a considerable amount of time (1 minute to several minutes or not at all) to connect. Right now I’m not able to see anything. Nothing will load for me.

@Paulie_D does the above site load for you?

[Paulie_D]

Not the fastest I’ve ever seen but not too bad at my office speeds.

I’d be looking into some optimisation though.

The#top section has this

@media only screen and (min-width: 768px)
#top {
background: #f7f7f7;
margin: 0 -3.631em;
padding: 0 3.631em;
}

which helps it stretch further than the #header

[Paulie_D]

As for the logo centering.

It’s currently in an <hgroup> element (which has been deprecated by the way..so swap it out for a div if you can).

Which is floated left. If you remove that..it centers (AFAICT).

#header hgroup {
float: left; /* remove this */
}

[chrisburton]

Thanks, Pauly. Not sure what’s going on with my connection.

Anyway, from what I remember last night, there was a few errors in the console. I’d take care of those too. Along with optimizing images, minifying css and javascript, and gzip.

[rebecca]

Thanks Chris & Paulie!

I will have a look into some optimisation and hopefully get it working properly.

In WordPress am I able to swap out <hgroup> for a div?
I can’t see html code for anything other than the page content I put in.

Thanks again for your patience, I’m in a bit over my head here.

[Author]

Posts