• I’ve been trying to get my drop-down navigation menu centered under my logo/over the body text for literally weeks now. I’ve got it to appear correct now on Chrome for Android, but not in Firefox, Chrome, or Firefox for Android. It’s off to the left. I know there are a zillion posts on this very topic, but after trying every idea I’ve found to no avail, it’s clear to me that I need some specific help. So much appreciation for anyone who can help me!

    https://www.leenb.com
    Here’s the CSS:
    #access {
    border-bottom: none;
    height:34px;
    font-size:16px;
    text-transform: uppercase;
    width: 50%;
    margin: 0 auto;}

    /*** NAV MENU STYLE ***/

    .sf-menu a:link {#000000;}
    .sf-menu a, .sf-menu a:visited {color: #000;}
    .sf-menu li {
    float:left;
    position:relative;}
    .sf-menu {
    float:left;
    margin-left:1px;}
    .sf-menu a {
    border-color:#fff;
    border-style:none;
    border-width:0px;
    padding:9px 13px;
    text-decoration:none;
    margin-left:-1px;}
    .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
    color:#9e9e9e;}
    .sf-menu li {
    background:#fff;}
    .sf-menu li li {
    background:#fff;}
    .sf-menu li li li {
    background:#FFF;}
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background:#fff;
    outline: 0;
    border-bottom-color:#FFF;}
    border-bottom:0px solid #9e9e9e;}
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    top:34px; /* overriding essential styles */}
    .sf-menu ul ul {
    margin-top:0;}
    .sf-menu ul a {
    background:#fff;
    border-bottom:none;}
    .sf-menu ul a:hover {
    color: #000;}

    #menu {
    width:960px;
    margin:0 auto;
    border: none;
    position: static; top: 10px; right: 10px;}
    #main {
    width:960px;
    margin:0 auto;
    padding: 40px 0 22px;
    overflow:visible;
    position:relative;}
    #main-nav .nav > li > a:hover, #main-nav .nav > li.dropdown.open > a, #main-nav .nav > li.current-menu-item > a, #main-nav .nav > li.current-menu-parent > a, #main-nav .nav > li.current-menu-ancestor > a {
    background-color: #666666;}

    #container {
    width:960px;
    float:left;
    margin:0 0 0 10px;}
    #content {
    margin: 0 240px;
    overflow:visible;}

Viewing 1 replies (of 1 total)
  • I can see that you have made som change to your css. I do not know if its working like you want. I’m no expert, but I tested a bit with firebug on your site and here is how would do it.
    Try to change these lines in your style.css:
    Line 67
    width: 960px
    Line 77
    width: 100%
    Line 423
    margin-left: 268px
    The last line you can play with the px to get it were you want.
    I would also move the logo a bit to the right to get it right over the content. You can fix that on line 177. just remove the width and put a margin-left: 70px, that should do the trick.

Viewing 1 replies (of 1 total)
  • The topic ‘Nav Menu Not Centering’ is closed to new replies.