Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

centering menu

4:40 pm on Feb 8, 2012 (gmt 0)

I have the following code for a menu I am using. I would like to center the entire menu on the page.

Can someone help me decipher this?

I'd also like to lose the line under the menu.

Thanks. Kinda new to css.

width: 800px;
position: fixed;
margin: 0;
background: transparent url('../images/menu_bg.png') repeat;

left: -400px;

.nav, .subnav
list-style: none;
display: block;
margin: 24px 0 0 30px;
float: left;
font-size: 13px;

background: none;

.nav li
display: block;
float: left;
margin: 0 10px 0 10px;

.nav li a
font-family: Abel,Arial,"helvetica neue",Helvetica,Verdana,sans-serif;
font-weight: bold;
color: #ccc;
padding: 10px 5px 18px 5px;

.nav li ul
display: none;
padding: 5px 0 10px 0;
margin: 10px 0 10px -20px;
list-style: none;
padding: 10px;
float: left;
width: 180px;
background: transparent url('../images/000_80.png') repeat;
z-index: 999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.7);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.7);
box-shadow: 0 1px 2px rgba(0,0,0,.7);
border: 1px solid #666;

.nav li ul li ul
display: none;
padding: 5px 0 10px 0;
margin: -38px 0 10px 180px;
list-style: none;
padding: 10px;
float: left;
width: 150px;
background: transparent url('../images/000_60.png') repeat;
z-index: 999;

.nav li ul li
line-height: 2.5em;
float: none;
width: 100%;

.nav li.current-menu-parent ul
display: none;

.nav li.current-menu-item > a, .nav li > a:hover, .nav li > a.hover, .nav li > a:active
color: #EEDD82;

.nav li.current-menu-item ul li a:hover, .nav li ul li a:hover, .nav li ul li:hover a, .nav li ul li.current-menu-item a
border: 0;

[edited by: alt131 at 6:43 pm (utc) on Feb 8, 2012]
[edit reason] Thread Tidy [/edit]

5:57 pm on Feb 8, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member


Welcome to WebmasterWorld. Just an FYI, posting personal links is a no no.

I assume you are referring to the HOME ART DESIGN etc links at the top. For the #menu_wrapper you would want the margin setting to be
#menu_wrapper {
margin: 0 auto;

This will cause it to align to the middle. If you need more margin at the bottom, add
margin-bottom: 10px; /* example only */

And I believe the line is caused in
.nav li ul {
border: 1px solid #666;

Could be wrong about that one though.

1:26 am on Feb 9, 2012 (gmt 0)

Thank you Marshall.

I was able to get the menu centered by your method and changing the position: to "relative". However, I am still having problems moving the menu bar up. Incidently, I did find that the bottom border was pulling from another css page.

here is the current code ::

width: 800px;
position: relative;
margin: 0 auto;
margin-bottom: 10px; /* example only */
background: transparent url('../images/menu_bg.png') repeat;


BTW, thank you for the heads up on including URLs. much obliged.
3:24 am on Feb 9, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member


You're welcome. In the CSS you provided above, you can delete the position: relative. Also, when it comes to margins and padding, you do not need to separate the information.

In CSS, measurements order clockwise starting with the top: top, right, bottom, left. Using the CSS above, you can simply set the margins as follows:
margin: 0 auto 10px auto;

When it comes to zero, you do not have to include the px, but you do when it is a value. You can also use em or % in place of px, depending on your needs.

When you say move the menu bar up, do you mean there is too much space above the text and the top of the page? I noticed in your original CSS, there is a lot of margin and padding space at the top of several items:
.nav, .subnav - margin: 24px 0 0 30px;

The others though are probably irrelevant as they are set to display: none. That being said, if you are not using the sub-menus that are set to display none, you could probably delete it from your CSS.

Anything else, let me not. If not me, there are plenty of other people here more than capable of helping.

4:23 am on Feb 9, 2012 (gmt 0)

Thank you again. That all makes sense. I ended up figuring out the nav vertical movement from your definitions. It was embedded in another css that only effects the header.

Have a great night...j
6:01 pm on Feb 10, 2012 (gmt 0)

Hi again :::...

I am also trying to center the nav on another site ::

the css ::
#navigation{ width: 800px; font-size: 13px; font-weight: bold; margin: 0 auto 10px auto; }
#navigation ul{list-style:none; margin: 0;}
#navigation li{ float:left; position: relative; z-index:3;}
#navigation li a{ padding:20px 20px 20px 20px; display:block; text-decoration:none; text-transform: capitalize; }

I tried adding the margin code you suggested, but it doesn't work in this case.

any thoughts?

11:20 pm on Feb 15, 2012 (gmt 0)

This is getting silly. Can anyone help me decipher what is happening with the navigation not centering? here is the css code ::

#header-2{ margin-left: auto; margin-right: auto; width: 70%; }
#header-2 #navigation{ border-top: 1px solid #202020; }
#header-2 #navigation li:hover{ background-color: #742707;}

#header-2 #navigation ul li ul li{ background-color: #101010;} /* IE7+8 FIX */
#header-2 #navigation ul li ul li.odd{ background-color: #101010;}
#header-2 #navigation ul li ul li.even{ background-color: #1a1a1a;}

#header-2 #navigation ul li ul li:hover{ background-color: #742707;}

#header-2 #navigation .has-sub-menu .top-menu-item{ background-image: url(gfx/has_sub_menu_top.png); }
#header-2 #navigation .sub-menu .has-sub-menu{ background-image: url(gfx/has_sub_menu_dropdown.png); }

#header-2 #navigation ul li a{ color:#cccccc; }
#header-2 #navigation ul li ul li a{ color:#909090; }

#header-2 #navigation ul li ul li:hover a{ color:#cccccc; }
#header-2 #navigation ul li ul li:hover ul li a{ color: #909090;}

#header-2 #navigation ul li ul li:hover ul li:hover a{ color:#cccccc; }
#header-2 #navigation ul li ul li:hover ul li:hover ul li a{ color: #909090;}

#header-2 #navigation ul li ul li:hover ul li:hover ul li:hover a{ color:#cccccc; }
#header-2 #navigation ul li ul li:hover ul li:hover ul li:hover ul li a{ color: #909090;}

#header-2 #navigation ul li ul li:hover ul li:hover ul li:hover ul li:hover a{ color:#cccccc; }
#header-2 #navigation ul li ul li:hover ul li:hover ul li:hover ul li:hover ul li a{ color: #909090;}

#header-2 #navigation ul li ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover a{ color:#cccccc; }
#header-2 #navigation ul li ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul li a{ color: #909090;}

#header-2 .contact_holder { color: #909090;}

any thoughts?

3:45 pm on Feb 18, 2012 (gmt 0)

Can you post your html that goes with the css above?
1:17 am on Feb 19, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Tangential comment:
#header-2 #navigation ul li ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul li a{ color: #909090;}

Nested styles have their uses. Like, say, div.hanging p instead of eighteen consecutive p.hanging. But let's not overdo it. Really. Even the first two words are redundant, since an id is unique. When it gets to where you have to stop and count on your fingers, it may be time to explore other options.
5:08 pm on Feb 19, 2012 (gmt 0)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel='stylesheet' id='admin-bar-css' href='http://siteURL/wp-includes/css/admin-bar.css?ver=20111209' type='text/css' media='all' />
<script type='text/javascript' src='http://siteURL/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<script type='text/javascript' src='http://siteURL/wp-content/plugins/wp-social-toolbar-pro/js/corescripts.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://siteURL/wp-content/plugins/wp-social-toolbar-pro/js/scripts.js?ver=3.3.1'></script>
<script type='text/javascript' src='https://apis.google.com/js/plusone.js?ver=3.3.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://siteURL/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://siteURL/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 3.3.1" />
<link rel="stylesheet" type="text/css" href="http://siteURL/wp-content/plugins/wp-social-toolbar-pro/css/wp_social_toolbar.css" />
<style type="text/css">
#wps-toolbar-show { background:#666666 !important; }
#wp-social-toolbar-show-box { border-color:#666666 !important; }
#wps-toolbar-content #wps-toolbar-top #wps-close-button,.wpcs-border { background:#666666 !important; }
#wps-toolbar-content #wps-toolbar-top #wps-twitter-status { background-color:#999999 !important; font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:12px; background-image:url('http://siteURL/wp-content/plugins/wp-social-toolbar-pro//images/icons/normal/bird/white.png'); background-repeat:no-repeat; }
#wpsc-social-accounts,#wps-toolbar-bottom { background:#000000 !important; }
#wpsc-social-accounts img:hover,.wpst-credit-pro:hover { background:#ffffff; }
#wp-social-toolbar-show-box,#wps-toolbar-content #wps-toolbar-bottom #wpsc-social-accounts img,#wps-toolbar-content #wps-toolbar-bottom,.wpcs-share-icons { border-color:#666666 !important; }
#wps-toolbar-content #wps-toolbar-top #wps-twitter-status a { color:#ffffff; }
#wps-toolbar-bottom{ height: 30px !important; overflow:hidden !important; }
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="http://siteURL/wp-content/plugins/wp-social-toolbar-pro/css/ie.css" />
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }

<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/header/header-2.css' type='text/css'/>
<link rel="shortcut icon" href="http://siteURL/wp-content/themes/rockwell_v1.7.1/favicon.ico" />
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/js/prettyphoto/css/prettyPhoto.css' type='text/css'/>
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/global.css' type='text/css'/>
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/style.css' type='text/css'/>
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/sidebar/sidebars.css' type='text/css'/>
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/comments/comments.css' type='text/css'/>

<script type="text/javascript" src="http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/header/header-2.js"></script>
<script type="text/javascript" src="http://siteURL/wp-content/themes/rockwell_v1.7.1/js/prettyphoto/js/jquery.prettyPhoto.js"></script>

<link rel='stylesheet' id='changeable_stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/skins/black/black.css' type='text/css'/> <!-- <link rel='stylesheet' id="changeable_stylesheet" href='http://siteURL/wp-content/themes/rockwell_v1.7.1/skins/black/black.css' type='text/css'/> -->

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Cambro|Abel|Abel|Abel|Abel|Abel|Abel|Abel|Abel|Abel|Abel|Abel|Abel|Abel|Abel|Abel|' type='text/css'/><style type="text/css">body { font-family: 'Cambro' !important;}
#navigation { font-family: 'Abel' !important;}
.sub-menu { font-family: 'Abel' !important;}
.info_line { font-family: 'Abel' !important;}
.sidebar h2, .post_meta h2 { font-family: 'Abel' !important;}
.sidebar { font-family: 'Abel' !important;}
#cat_title { font-family: 'Abel' !important;}
h1 { font-family: 'Abel' !important;}
h2 { font-family: 'Abel' !important;}
h3 { font-family: 'Abel' !important;}
h4 { font-family: 'Abel' !important;}
h5 { font-family: 'Abel' !important;}
h6 { font-family: 'Abel' !important;}
h7 { font-family: 'Abel' !important;}
.post_info { font-family: 'Abel' !important;}
.post_info_single { font-family: 'Abel' !important;}

<style type="text/css">
#header-1 #navigation li a {width: 75px !important;}
#header-1 #navigation ul li ul li a {width: 100px !important;}

#header-2 #navigation ul li li a {width: 100px !important;}
#header-2 #navigation ul li li ul li a {width: 100px !important;}
#header-1 #navigation ul li ul li .sub-menu, #header-2 #navigation ul li ul li .sub-menu {margin-left: 120px !important; }
.sub-menu .has-sub-menu{ background-position: 106px 17px !important;}
.sub-menu .has-sub-menu:hover{ background-position: 106px -83px !important;}

<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/home/home-1.css' type='text/css'/>
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/home/message-1.css' type='text/css'/>
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/portfolio/portfolio-cat-7.css' type='text/css'/>
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/slider/slider-1.css' type='text/css'/> <script type="text/javascript" src="http://siteURL/wp-content/themes/rockwell_v1.7.1/js/jquery.easing.js"></script>
<script type="text/javascript">
var show_slider2_grid = 'false';
var show_slider_title = 'false';
var slider_autoslide = '3000';
<script type="text/javascript" src="http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/slider/slider-1.js"></script>
<script type="text/javascript">
$('a[rel^="prettyPhoto"]').prettyPhoto({theme: 'dark_rounded',slideshow:5000, autoplay_slideshow:false, overlay_gallery:false});
$('.size-thumbnail, .size-medium, .size-large, .size-full').parent().prettyPhoto({theme: 'dark_rounded', autoplay_slideshow:false, overlay_gallery:false});


<script type="text/javascript" src="http://siteURL/wp-content/themes/rockwell_v1.7.1/js/main.js"></script>

<body class="stencil_clothing option-slider-1">
<div id="header_container" class="header_container_2">
<div id="header_wrapper">
<div id="header-2" class="header">
<div class="logo_holder"><a href="http://siteURL"><img src="http://siteURL/wp-content/uploads/2012/02/blank.png"></a></div>

<!-- /////////////////////////////////////////////////////////////////////// -->
<!-- // Navigation // -->
<!-- /////////////////////////////////////////////////////////////////////// -->
<div id="navigation">
<div class="menu-navigation-container">
<div class="menu-main-menu-container"><ul id="menu-navigation" class="menu"><li id="menu-item-1013" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1013" ><a href="http://siteURL"><span class="top-menu-item">Home</span></a></li>
<li id="menu-item-1022" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1022" ><a href="http://siteURL/category/art"><span class="top-menu-item">Art</span></a></li>
<li id="menu-item-1031" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1031" ><a href="http://siteURL/category/design"><span class="top-menu-item">Design</span></a></li>
<li id="menu-item-1021" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1021" ><a href="http://siteURL/category/furniture"><span class="top-menu-item">Furniture</span></a></li>
<li id="menu-item-1032" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1032" ><a href="http://siteURL/category/purchase"><span class="top-menu-item">Purchase</span></a></li>
<li id="menu-item-595" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-595" ><a href="http://siteURL/bio"><span class="top-menu-item">Bio</span></a></li>
<li id="menu-item-593" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-593" ><a href="http://siteURL/category/news"><span class="top-menu-item">News</span></a></li>
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594" ><a href="http://siteURL/contact"><span class="top-menu-item">Contact</span></a></li>
</ul></div> </div><!-- END div.menu-navigation-container -->

</div><!-- END div#navigation -->

<div class="clear"></div>

</div><!-- END div#header -->
</div><!-- END div#header_wrapper -->
</div><!-- END div#header_container -->

[edited by: alt131 at 6:07 pm (utc) on Feb 19, 2012]
[edit reason] Thread Tidy [/edit]


Featured Threads

Hot Threads This Week

Hot Threads This Month