Submenu Position

  • mistermango

    #3896

    I’ve been chipping away and about have my site’s header sub-navigation styled horizontally instead of vertically. I’m encountering two issues.

    First is the positioning of the background of the submenu upon dropdown. I’m trying to force all dropdowns to the left of the container and fixed it’s size to 100%, instead of it dropping down aligned with the left side of the parent (top-level) navigation item.

    Second is the presence of the submenu in its current state. I’d like the submenu to remain visible at all times while “current.”

    Below is the (custom) code I think I need to adjust, but I’m stuck. I’m beginning to think I’m going to have to tweak code within function.php and/or header.php.

    Site under development: http://www.internationalfocusnc.org.

    Anyone have any ideas?

    #header-menu-wrap {
    background: #990000;
    width: 960px;
    height: 35px;
    padding: 0px;
    box-shadow: 2px 0px 0px #ccc, -2px 0px 0px #ccc;
    -moz-box-shadow: 2px 0px 0px #ccc, -2px 0px 0px #ccc;
    -webkit-box-shadow: 2px 0px 0px #ccc, -2px 0px 0px #ccc;
    }

    #header-menu,
    #secondary-menu {
    height: 35px;
    margin: 0px;
    }

    #header-menu > li {
    color: #FFFFFF;
    font-family: arial,verdana,tahoma,georgia;
    font-size: 15px;
    width: 137px;
    margin: 0;
    padding: 0px;
    text-align: center;
    }

    #header-menu > li.menu-item-ancestor > a {
    background: none;
    padding-left: 8px;
    }

    /* Top level header menu, hover and current state */
    #header-menu > li:hover,
    #header-menu > li.current-menu-item,
    #header-menu > li.current-menu-ancestor {
    background: none;
    }
    #header-menu > li:hover > a,
    #header-menu > li.current-menu-item > a,
    #header-menu > li.current-menu-ancestor > a {
    background: #495677;
    color: #ffffff;
    }
    #header-menu > li:hover > a > span,
    #header-menu > li.current-menu-item > a > span,
    #header-menu > li.current-menu-ancestor > a > span {
    color: #ffffff;
    }
    #header-menu > li.menu-item-ancestor:hover > a,
    #header-menu > li.current-menu-item > a,
    #header-menu > li.current-menu-ancestor > a {
    background-position: -877px -192px;
    }

    /* Sub level header menu, default state */
    #header-menu ul li a {
    font-size: 12px;
    padding: 0px 10px 0px 10px;
    color: #ffffff;
    display: inline;
    }
    #header-menu ul li {
    background: #495677;
    padding: 6px 0px 6px 0px;
    }

    /* Sub level header menu, hover and current state */
    #header-menu ul li:hover,
    #header-menu ul li.current-menu-item,
    #header-menu ul li.current-menu-ancestor {
    background-color: #495677;
    background-position: left -856px;
    font-weight: bold;
    }
    #header-menu ul li:hover > a,
    #header-menu ul li.current-menu-item > a,
    #header-menu ul li.current-menu-ancestor > a {
    background-color: #495677;
    color: #ffffff;
    font-weight: bold;
    }
    Mod

    Kenneth John Odle

    #26510

    It looks pretty good in FF. It’s got a way to go, though, but you are mostly there.

    fixed it’s size to 100%

    You’ve got to be careful here. “100%” always means “100% of the parent container“, which, in this case, is #containter. That’s why you are getting a weird shadow off to the right. You could eliminate the box shadow and that would go away, but it might not be what you are looking for.

    I’d like the submenu to remain visible at all times while “current.”

    I believe you’ll need to tweak some javascript in order to accomplish that. Someone else was working on that very issue in this forum 2-3 weeks ago; if you look around you may see that they’ve already figured this out.

    mistermango

    #26511

    Thanks, Kenneth.

    OK. I was able to accomplish the width of the background by adding width: 100% as such:

    #header-menu ul li {
    background: #495677;
    padding: 6px 0px 6px 0px;
    width: 100%;
    }

    But I can’t seem to figure out why the inline li items are displaying one line at a time, instead of, well, in line.

    Mod

    Kenneth John Odle

    #26512

    You had it before: the three items under “Get Involved” were display horizontally, at least in Firefox. (And it looked cool, too, but perhaps a narrow white or light grey line between them would really set them off.)

    Which browser are you using?

    mistermango

    #26513

    I’m looking in both FF and Safari. As soon as I added width:100% I lost the inline style and they stacked again.

    I thought it was the graphene options setting, but adjusting that kept them stacked. Nothing else changed except the width–as soon as I remove that code, they go in line again.

    Mod

    Kenneth John Odle

    #26514

    Try adjusting the width with pixels instead of percent. Say, 100px.

    mistermango

    #26515

    Hmm. Well, that’s telling. It’s defining the width for each li element (overriding, I assume, the graphene options menu width setting). That’s why the 100% causes the stacked look — it’s telling each li item to be full width.

    I wonder if the key is in the #nav style.

    Mod

    Kenneth John Odle

    #26516

    Are you using Firebug? That really would make this a lot easier for you…sort of. (Menus are somewhat tricky with Firebug, because of their popping up and disappearing behavior, but it’s manageable.)

    mistermango

    #26517

    The 100px setting shrunk caused the first li item to display on two lines, but left the other two (narrower) items on one.

    mistermango

    #26518

    I’ve been over it several times with firebug. I think it must be somewhere in the #nav style, I just can’t find where.

Viewing 10 posts - 1 through 10 (of 11 total)

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!