Community Forums › Forums › Archived Forums › General Discussion › Decor Theme Header is off
- This topic has 2 replies, 2 voices, and was last updated 10 years, 1 month ago by Rachel.
-
AuthorPosts
-
February 20, 2014 at 9:46 am #91400RachelMember
Hi,
Having problems making my header look like “one unit”. Right now, it looks pieced together. Although I uploaded an header image that is 1140 x 140, it still does not stretch across the entire page.
Additionally the navigation menu is not aligned. I don’t mind if it appears below the header…it this time though it also looks pieced in.
I would also love to be able to center the navigation menu if possible.
My site is http://workfromyourhome101.com
My goal is to have the header area look similar to http://wisewomendo.com/ or http://baerhomedesign.com/ — in other words, I would like the entire header area to have the dark damask background (came with the theme).
Here is snippit of my code;
/* Wrap
———————————————————— */#wrap {
background: url(images/bg-header.jpg) repeat-x top;
margin: 0;
padding: 0;
}/* Header
———————————————————— */#header {
margin: 0 auto;
min-height: 165px;
width: 1140px;
}#title-area {
float: left;
margin: 25px 0 0;
overflow: visible;
padding: 0;
width: 400px;
}#title {
color: #fff;
font-family: ‘Great Vibes’, cursive;
font-size: 68px;
line-height: 1.1;
margin: 0;
text-shadow: #000 -1px -1px;
}#title a,
#title a:visited {
color: #e7cba4;
padding: 0;
text-decoration: none;
}#title a:hover {
color: #fff;
}#description {
color: #adadad;
font-size: 24px;
font-style: italic;
margin: -15px 0 0;
padding: 0;
text-shadow: #000 -1px -1px;
}#header .widget-area {
float: right;
padding: 35px 0 0;
width: 740px;
}/* Image Header – Partial Width
———————————————————— */.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
min-height: 140px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 400px;
}.header-image #description {
display: block;
overflow: hidden;
}/* Image Header – Full Width
———————————————————— */.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a {
width: 100%;
}/* Header / Primary / Secondary Navigation
———————————————————— */#nav {
margin: -30px 0 40px;
font-family: ‘Andika’, sans-serif;
}#subnav {
margin: -10px 0 20px;
}#nav .wrap,
#subnav .wrap {
background: none repeat scroll 0 0 #000000;
margin: 0 auto;
width: 1140px;
}.menu-primary,
.menu-secondary,
#header .menu {
clear: both;
color: #adadad;
font-size: 12px;
margin: 0 auto;
overflow: hidden;
}#header .menu {
float: right;
}.menu-primary ul,
.menu-secondary ul,
#header .menu ul {
float: left;
width: 100%;
}.menu-primary li,
.menu-secondary li,
#header .menu li {
float: left;
list-style-type: none;
}.menu-primary a,
.menu-secondary a,
#header .menu a {
color: #adadad;
display: block;
font-size: 14px;
padding: 16px 12px;
position: relative;
text-decoration: none;
}.menu-secondary a {
color: #786031;
}.menu-primary li a:active,
.menu-primary li a:hover,
.menu-primary .current_page_item a,
.menu-primary .current-cat a,
.menu-primary .current-menu-item a,
#header .menu li a:active,
#header .menu li a:hover,
#header .menu .current_page_item a,
#header .menu .current-cat a,
#header .menu .current-menu-item a {
color: #786031;
}.menu-secondary li a:active,
.menu-secondary li a:hover,
.menu-secondary .current_page_item a,
.menu-secondary .current-cat a,
.menu-secondary .current-menu-item a {
color: #333;
}.menu-primary li li a,
.menu-primary li li a:link,
.menu-primary li li a:visited,
.menu-secondary li li a,
.menu-secondary li li a:link,
.menu-secondary li li a:visited,
#header .menu li li a,
#header .menu li li a:link,
#header .menu li li a:visited {
background: none;
border-bottom: 1px dotted #323232;
color: #786031;
font-size: 14px;
padding: 9px 8px 8px;
position: relative;
text-transform: none;
width: 168px;
}.menu-primary li li a:active,
.menu-primary li li a:hover,
.menu-secondary li li a:active,
.menu-secondary li li a:hover,
#header .menu li li a:active,
#header .menu li li a:hover {
color: #fff;
}.menu-primary li ul,
.menu-secondary li ul,
#header .menu li ul {
-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.60);
-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.60);
background: #0e0e0e;
border: 1px solid #404040;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.60);
height: auto;
left: -9999px;
margin: 0 0 0 -1px;
padding: 15px 20px 20px 20px;
position: absolute;
width: 190px;
z-index: 9999;
}.menu-primary li ul a,
.menu-secondary li ul a,
#header .menu li ul a {
width: 140px;
}.menu-primary li ul ul,
.menu-secondary li ul ul,
#header .menu li ul ul {
margin: -36px 0 0 159px;
}.menu li:hover ul ul,
.menu li.sfHover ul ul {
left: -9999px;
}.menu li:hover,
.menu li.sfHover {
position: static;
}ul.menu li:hover>ul,
ul.menu li.sfHover ul,
#header .menu li:hover>ul,
#header .menu li.sfHover ul {
left: auto;
}.menu-primary li a.sf-with-ul,
.menu-secondary li a.sf-with-ul,
#header .menu li a.sf-with-ul {
padding-right: 25px;
}.menu li a .sf-sub-indicator {
background: url(images/icon-down.png) no-repeat top;
height: 3px;
position: absolute;
right: 7px;
text-indent: -9999px;
top: 28px;
width: 5px;
}.menu li a:hover .sf-sub-indicator {
background-position: bottom;
}.menu-secondary li a:hover .sf-sub-indicator {
background-position: top;
}.menu li li a .sf-sub-indicator,
.menu li li li a .sf-sub-indicator {
background: url(images/icon-right.png) no-repeat left;
height: 5px;
position: absolute;
right: 8px;
text-indent: -9999px;
top: 15px;
width: 3px;
}.menu li li a:hover .sf-sub-indicator,
.menu li li li a:hover .sf-sub-indicator {
background: url(images/icon-right.png) no-repeat right;
}#wpadminbar li:hover ul ul {
left: 0;
}/* Primary Navigation Extras
———————————————————— */.menu li.right {
float: right;
padding: 16px 12px;
}.menu li.right a {
background: none;
border: none;
color: #e7cba4;
display: inline;
text-decoration: none;
}.menu li.right a:hover {
color: #fff;
text-decoration: none;
}.menu li.search {
padding: 0;
}.menu li.rss a {
background: url(images/rss.png) no-repeat center left;
margin: 0 0 0 10px;
padding: 0 0 0 16px;
}.menu li.twitter a {
http://workfromyourhome101.com
background: url(images/twitter-nav.png) no-repeat center left;
padding: 0 0 0 20px;
}February 20, 2014 at 11:55 am #91440eamonmoriartyParticipantFor now I am replying about the header background only.
I think the reason why you are not seeing the damask background is because your header image has a solid background which os overlayong the original image.
I think you need to leave out that solid background from your 'cropped-0219-final4-header-background-head-only5.png' and leave the background transparent.
Eamon Moriarty
EM DzineFebruary 23, 2014 at 12:27 pm #92032RachelMemberNo, that is not it Eamon--but thanks!
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.