How to wrap header

[kryan2]

Hi there!

My website is http://www.bucketlistnation.com

How do I get the header to wrap out so that there is no "white space" on the sides when you are viewing it in a browser window?

I want it to look like this if possible: http://www.marieforleo.com/

Any help is much appreciated!

http://www.bucketlistnation.com

[AnitaC]

The current header width is 960px. You can change that to 100% and it will fill, however, keep in mind that your image now has to be wider than what you currently have there.

---

Need help with customization or troubleshooting? Reach out to me.

[kryan2]

Thanks for your help!

I updated everything that said 960 px on the function.php and style.css files. For some reason, it is still cropping my images at 960 px. Am I missing anything?

/* Header
------------------------------------------------------------ */

#header {
margin: 0 auto;
min-height: 535px;
overflow: visible;
width: 100%;
background: url(images/bg.png);
}

#title-area {
float: left;
overflow: hidden;
padding: 30px 0 25px;
width: 480px;
}

#title {
font-family: 'Pacifico', arial, serif;
font-size: 48px;
line-height: 60px;
margin: 0 0 5px;
text-shadow: #fff 1px 1px;
}

.header-full-width #title {
text-align: center;
}

#title a,
#title a:hover {
color: #8f8d85;
text-decoration: none;
}

#description {
color: #938868;
font-size: 14px;
font-style: italic;
text-shadow: #fff 1px 1px;
}

.header-full-width #description {
text-align: center;
}

#header .widget-area {
float: right;
width: 470px;
}

/* Image Header - Partial Width
------------------------------------------------------------ */

.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
height: 535px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 100%;
}

.header-image #description {
display: block;
overflow: visible;
}

/* Image Header - Full Width
------------------------------------------------------------ */

.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a {
width: 100%;
}

/* Navigation Constants
------------------------------------------------------------ */

li:hover ul ul,
li.sfHover ul ul {
left: -9999px;
}

li:hover,
li.sfHover {
position: static;
}

li a .sf-sub-indicator {
position: absolute;
text-indent: -9999px;
}

/* Header Right Navigation
------------------------------------------------------------ */

#header ul.nav,
#header ul.menu {
float: right;
}

#header ul.nav ul,
#header ul.menu ul {
float: right;
margin: 0;
padding: 0;
width: 100%;
}

#header ul.nav li,
#header ul.menu li {
background-color: #666;
float: left;
list-style-type: none;
text-transform: uppercase;
}

#header ul.nav li a,
#header ul.menu li a {
color: #fff;
display: block;
font-size: 13px;
padding: 7px 10px 5px;
position: relative;
text-decoration: none;
}

#header ul.nav li a:hover,
#header ul.nav li a:active,
#header ul.nav .current_page_item a,
#header ul.nav .current-cat a,
#header ul.nav .current-menu-item a,
#header ul.menu li a:hover,
#header ul.menu li a:active,
#header ul.menu .current_page_item a,
#header ul.menu .current-cat a,
#header ul.menu .current-menu-item a {
background-color: #000;
color: #fff;
}

#header ul.nav li li a,
#header ul.nav li li a:link,
#header ul.nav li li a:visited,
#header ul.menu li li a,
#header ul.menu li li a:link,
#header ul.menu li li a:visited {
background-color: #666;
border: 1px solid #666;
border-top-width: 0;
color: #fff;
font-size: 12px;
padding: 5px 10px;
position: relative;
text-transform: none;
width: 148px;
}

#header ul.nav li li a:hover,
#header ul.nav li li a:active,
#header ul.menu li li a:hover,
#header ul.menu li li a:active {
background-color: #000;
}

#header ul.nav li ul,
#header ul.menu li ul {
height: auto;
left: -9999px;
position: absolute;
width: 170px;
z-index: 9999;
}

#header ul.nav li ul a,
#header ul.menu li ul a {
width: 150px;
}

#header ul.nav li ul ul,
#header ul.menu li ul ul {
margin: -33px 0 0 169px;
}

#header ul.nav li:hover>ul,
#header ul.nav li.sfHover ul,
#header ul.menu li:hover>ul,
#header ul.menu li.sfHover ul {
left: auto;
}

[spoll]

Hi-I see you've succeeded, I'm trying to find the answer myself, how did you do it?

Thanks

[Author]

Posts