Change Navigation and Header Menu Location in Minimum Theme

[Sandee]

Hi,

I am trying to do a couple of things to my site using the Minimum theme.

I want to center the navigation menu (formerly in header right widget area), which I was able to do adding the following code to my functions.php file.

/** Remove the header right widget area */
unregister_sidebar( 'header-right' );

And I also would like to resize (and center) the header. For that I modify the header size in my style.css and functions.php files as is described here http://www.studiopress.community/topic/changing-header-size/.

I used 1600 X 300 as I want the header to run the full width of the page.

While the sizing is spot on, the align is not centered. What I get is something that looks like this (including a theme since site is 'down'):

I'll apologize in advance for including so much code, but I'm not sure which part of the code is the issue.

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

#header {
	background-position: top center!important;
	color:	#ffeecc;
	margin: 0 auto;
	min-height: 60px;
	overflow: hidden;
	width: 1600px;
}

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

.header-image #title-area,
.header-image #title,
.header-image #title a {
	display: block;
	height: 300px;
	overflow: hidden;
	padding: 0;
	width: 1600px;
}

.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,
#subnav {
	background-color: #383838;
}

.menu-primary,
.menu-secondary,
#header .menu {
	clear: both;
	color: #383838;
	font-size: 13px;
	margin: 0 auto;
	overflow: hidden;
	width: 100%;
	text-align:center; 
}

#header .menu {
	float: none;
	width: auto;
}

.menu-primary ul,
.menu-secondary ul,
#header .menu ul {
	float: none;
	width: 100%;
}

.menu-primary li,
.menu-secondary li,
#header .menu li {
	display: inline-block;  
	float: none;   
	list-style-type: none;
}

.menu-primary a,
.menu-secondary a,
#header .menu a {
	color: #ffffff;
	display: block;
	letter-spacing: 2px;
	padding: 15px;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
}

.menu-primary li a:active,
.menu-primary li a:hover,
.menu-primary li:hover a,
.menu-primary .current_page_item a,
.menu-primary .current-cat a,
.menu-primary .current-menu-item a,
.menu-secondary li a:active,
.menu-secondary li a:hover,
.menu-secondary li:hover a,
.menu-secondary .current_page_item a,
.menu-secondary .current-cat a,
.menu-secondary .current-menu-item a,
#header .menu li a:active,
#header .menu li a:hover,
#header .menu li:hover a,
#header .menu .current_page_item a,
#header .menu .current-cat a,
#header .menu .current-menu-item a {
	background-color: #ff5544;
	color: #fff;
}

.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;
	background-color: #fff;
	border: 1px solid #e4e4e4;
	border-top: none;
	color: #383838;
	font-size: 12px;
	padding: 10px;
	position: relative;
	text-transform: none;
	width: 163px;
}

.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 {
	background-color: #ff5544;
	color: #fff;
}

.menu-primary li ul,
.menu-secondary li ul,
#header .menu li ul {
	height: auto;
	left: -9999px;
	margin: 0 0 0 -1px;
	position: absolute;
	width: 185px;
	z-index: 9999;
}

.menu-primary li ul a,
.menu-secondary li ul a,
#header .menu li ul a {
	width: 175px;
}

.menu-primary li ul ul,
.menu-secondary li ul ul,
#header .menu li ul ul {
	margin: -39px 0 0 184px;
}

.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 li a .sf-sub-indicator,
.menu li li a .sf-sub-indicator,
.menu li li li a .sf-sub-indicator {
	position: absolute;
	text-indent: -9999px;
}

#wpadminbar li:hover ul ul {
	left: 0;
}

/* Primary Navigation Extras
------------------------------------------------------------ */

.menu li.right {
	float: right;
	font-weight: 700;
	letter-spacing: 2px;
	padding: 20px;
	text-transform: uppercase;
}

.menu li.right a {
	color: #383838;
	display: inline;
}

.menu li.right a:hover {
	color: #ff5544;
}

.menu li.search {
	padding: 0 10px;
}

.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 {
	background: url(images/twitter-nav.png) no-repeat center left;
	padding: 0 0 0 20px;
}

Can someone please help me figure out how to get my header centered? Oh, and also make sure it's responsive (haven't touched that code)?

Unicorns and rainbows to the kind heart who can help! 🙂

http://www.sandeejackson.com

[Brad Dalton]

What you could do is center your header on a transparent background using a tool like Paint.net, Photoshop or GIMP.

---

Tutorials for StudioPress Themes.

[Sandee]

Thanks! I realized the code is fine for centering the menu (checked responsinator and everything's good). Still having problems with the image centering, so I will try your suggestion.

I so appreciate your help!

[Author]

Posts