Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Centering Navigation Bar- normal fixes don't work?

    Hi All!

    Sorry to join and immediately post a question-- it's been a few years since I've been up-to-date with my HTML and CSS, so now I'm having some trouble getting my navigation menu to align center. If I adjust the margins to auto, it centers the menu buttons, but bumps the menu background all out of whack.

    Code:
           #mainmenu-container {
    		height:71px;
    		width:1000px;
    		padding:0 94px;
    		margin:0 -79px;
    		background:url(images/menu.png) left top no-repeat;
    		position:absolute;
    		top:0;
    		z-index: 999;
    	}
    	#mainmenu {
    		width:800;
    		margin:0 auto;
    		list-style:none;
    	}
    	#mainmenu li a {
    		text-align:center;
    		color:#fff;
    		display:block;
    		text-decoration:none;
    		font-family:'Oswald';
    		padding:18px 30px;
    	}
    	#mainmenu li {
    		padding-left:7px;
    		position:relative;
    	}
    	#mainmenu li a:hover{
    		background:#91c000;
    	}
    	#header li ul {
    		top:38px;
    	}
    	#header #mainmenu li ul {
    		top:52px;
    	}
    	#header li ul .inner {
    		background:#91c000;
    		padding:0;
    	}
    	#header ul.children li, #header .sub-menu li {
    		padding:0 !important;
    		margin:0 !important;
    		height:25px;
    		line-height:25px;
    	}
    	#header ul.children li a, .sub-menu li a {
    		color:#fff !important;
    		padding:0 !important;
    		background:none;
    		height:25px;
    		line-height:25px;
    	}
    	#header ul.children li a:hover, .sub-menu li a:hover {
    		background:#a3cd23 !important;
    		color:#fff !important;
    	}
    	#header .sub-menu .sub-menu {
    		top:0 !important;
    	}
    My site's live at mapkoza.com

    I'm able to get the menu background image to move, or I can shove the margins in really tiny and force the menu on to two lines, but I can't get the menu content centered on the menu background.

    Thank you in advance for the help!
    Last edited by mapkoza; 01-15-2013 at 10:05 PM. Reason: repairing hyperlink

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello mapkoza,
    No worries about the question, that's what this forum is all about

    When you center 1000px wide .container (the last one that holds the ul menu), it's inside the parent .container and is also 1000px wide. Nothing to center if they are the same width.

    I'd point out that there is not a lot of reason to bury that ul in 3 containing div elements. See Divitis here.

    Look at centering that ul like this once (there are several other methods if this doesn't suit you)

    Code:
    ul {
        list-style: none outside none;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #mainmenu li, #secondarymenu li {
        display: inline-block;
        /*float: left;*/
        position: relative;
    }
    Based on this example.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    mapkoza (01-16-2013)

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you! I purchased the theme with the intent to customize, so the core coding was not my doing. The fact that the divs are nested is what's confusing me so much! =)

    Which ul should I be editing? Looking at my code, I can't find just a basic ul line; they all have additional modifiers.

    EDIT: Whoops! Was looking in the wrong style sheet. My bad. Let me try this out and I'll let you know how it works. Thanks again!
    Last edited by mapkoza; 01-16-2013 at 01:14 AM. Reason: Add additional info

  • #4
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Didn't work, unfortunately.

    Okay. No one's looking at the site right now, since I haven't announced it, so I don't have a problem leaving my ridiculous result live.

    Code:
    	#header-block {
    		position:relative;
    		padding-top:38px;
    	}
    	#mainmenu-container {
    		height:71px;
    		width:1000px;
    		padding:0 94px;
    		margin:0 -79px;
    		background:url(images/menu.png) left top no-repeat;
    		position:absolute;
    		top:0;
    		z-index: 999;
    	}
    	#mainmenu li a {
    		text-align:center;
    		color:#fff;
    		display:block;
    		text-decoration:none;
    		font-family:'Oswald';
    		padding:18px 30px;
    	}
    	
    	#mainmenu li {
    		width:800px;
    		margin:0 auto;
    		list-style:none;
    		padding-left:7px;
    		display: inline-block;
    		/*float: left;*/
    		position: relative;
    	}
    	#mainmenu li a:hover{
    		background:#91c000;
    Thought with your advice I'd figured out how to fix it... Guess not. =/ At least it's humorous right now. Any other suggestions? Or suggestions on how I can better un-nest my divs?

    Code:
    		<div id='header-block'>
    		<div id='mainmenu-container'>
    
    			<div id='mainmenu' align='center'>
    				<?php $nav_menu_params=array(
    					'depth'=>0,
    					'theme_location'=>'main-menu',
    					'menu_class'=>'menus menu-primary',
    					'fallback_cb'=>'block_main_menu'
    				);
    				wp_nav_menu($nav_menu_params); ?>
    			</div>
    		</div>
    I don't really get the point of them being nested that deeply?

    Thank you so much for your help!

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Quote Originally Posted by mapkoza View Post
    Thought with your advice I'd figured out how to fix it... Guess not. =/ At least it's humorous right now. Any other suggestions?
    The snippet of CSS you posted shows you changed the li but I don't see that you changed the styling for the ul.
    The online version is not updated to your most current version I think.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •