Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to wrap header
- This topic has 3 replies, 3 voices, and was last updated 10 years, 7 months ago by spoll.
-
AuthorPosts
-
September 16, 2013 at 10:14 pm #62941kryan2Member
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.comSeptember 17, 2013 at 7:50 pm #63102AnitaKeymasterThe 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.
Love coffee, chocolate and my Bella!
September 17, 2013 at 8:55 pm #63112kryan2MemberThanks 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;
}September 27, 2013 at 7:50 am #64455spollParticipantHi-I see you've succeeded, I'm trying to find the answer myself, how did you do it?
Thanks
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.