WordPress.com Forums » Topic: Full width header for Mystique Theme

jannemarri on "Full width header for Mystique Theme"

jannemarri — Tue, 04 Dec 2012 20:44:36 +0000

I wanted the menu items to space out evenly on the menu bar.. I will give thst a try. But I think I've figured out a way. Thank you so much for replying!!

designsimply on "Full width header for Mystique Theme"

designsimply — Tue, 04 Dec 2012 19:46:45 +0000

and then secondly I want to make the spaces in between the text and the divider on the menu. I have tried looking at the original CSS and playing around with that but I still can't figure it out.. What to do??

Do you mean you want more spacing surrounding the text inside each menu item? Here is an example you can start with:

#access a {
	padding-left: 2.2em;
	padding-right: 2.2em;
}

designsimply on "Full width header for Mystique Theme"

designsimply — Tue, 04 Dec 2012 06:06:23 +0000

I want the header to span the full width of the page instead of the normal constrained header that comes with the theme.

I would just add a background image to a different element instead of trying to re-position the header. Here is an example to illustrate:

#page {
	display: block;
	width: 100%;
	padding-top: 230px;
	background: url('http://heyheyheyyou.files.wordpress.com/2012/09/cf_header1.png') repeat-x;
}

Note that you can adjust the url() value and padding as needed.

jannemarri on "Full width header for Mystique Theme"

jannemarri — Sun, 04 Nov 2012 02:26:50 +0000

Oops. I changed the site to a different theme before I had posted this and forgot, but I want to know for the Theme Mystique because thats what I'll be using. Thanks so much!

jannemarri on "Full width header for Mystique Theme"

jannemarri — Sun, 04 Nov 2012 02:25:43 +0000

I want to create a full width header for my site and I'm busy testing out different things before it goes final. I want the header to span the full width of the page instead of the normal constrained header that comes with the theme.

I have the CSS add on and I was trying to use the CSS code below:

#branding {
background: url("");
width: 1366px;
height: 115px;
padding: 0;
position: relative;
display: block;
}

but its not working.HELP!

and then secondly I want to make the spaces in between the text and the divider on the menu. I have tried looking at the original CSS and playing around with that but I still can't figure it out.. What to do??

Thanks!!