Change Navigation and Header Menu Location in Minimum Theme

Community Forums Forums Design Tips and Tricks Change Navigation and Header Menu Location in Minimum Theme

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  CofCGrad97 1 year, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #51316

    CofCGrad97
    Participant
    Post count: 4

    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.com/forums/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’):

    screen shot of attempt to resize header image

    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! :)

    • This topic was modified 1 year, 2 months ago by  CofCGrad97.
    • This topic was modified 1 year, 2 months ago by  CofCGrad97.
    http://www.sandeejackson.com
    #51721

    braddalton
    Participant
    Post count: 9784

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


    #51723

    CofCGrad97
    Participant
    Post count: 4

    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!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.