Horizontal Subnav Width (Magazine theme)

Community Forums Forums Design Tips and Tricks Horizontal Subnav Width (Magazine theme)

This topic is: not resolved

This topic contains 4 replies, has 4 voices, and was last updated by  PresterJohn 1 year ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #40287

    eef
    Participant
    Post count: 8

    Hi! I’m trying to recreate a navigation style for a client. I feel like I’m super-close, but missing something (probably obvious).

    They want a drop-down horizontal menu like seen here: http://smchealth.org/

    This is what I’ve created so far: http://demo.eefdesigns.com/

    Here’s the CSS:

    `
    #subnav li:hover ul {

    left: 0;
    position: absolute;
    display: inline;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: #000;
    }
    `

    (It’s on my secondary nav, not using primary at the moment)

    I can’t get the links to line up under the main menu. I’ve tried wrapping the entire site at 960px, setting the width of ul to 960px, setting the left to auto (which just makes it align right under the parent link, but not take up the correct width), etc.

    It’s like it’s not wrapped at all–shouldn’t it be under the nav/subnav wrap?

    What am I missing? Thanks!

    http://demo.eefdesigns.com/
    #40927

    asdweb
    Participant
    Post count: 105

    Find this:
    #subnav li li a,
    #subnav li li a:link,
    #subnav li li a:visited {
    background-color: #ead3b1;
    border: 1px solid #ead3b1;
    border-top-width: 0;
    color: #2780c7;
    font-size: 12px;
    padding: 5px 10px;
    position: relative;
    text-transform: none;
    width: 128px;
    }

    and add:
    left: 150px;


    Amy Susan Design.com @AmySusanDesign

    #40988

    eef
    Participant
    Post count: 8

    Hi Amy,

    Thanks, unfortunately that doesn’t take into account different screen resolutions. I’ve been trying variations of this, but I’d literally have to adjust it for so many screen sizes it would be ridiculous so I’m trying to avoid it. I really need some sort of wrap that will make it start in line with the navigation–since the nav and subnav are wrapped and centered, I just don’t know why I can’t get this to fall into the same wrap!

     

     

    #41406

    ahtimes
    Participant
    Post count: 2

    I too would love to know the answer to this question. Working on a mobile responsive site on the Focus theme as the foundation and want to use a horizontal menu. Nothing I do will get the sub nav to wrap within the container at start at the left of the nav menu as opposed to the far left of the page or start of a menu.

    eager to find a fix!

     

    #50294

    PresterJohn
    Participant
    Post count: 64

    I’m frankly also interested. There’s this plugin:

    http://wordpress.org/support/plugin/genesis-subpages-as-secondary-menu

    but it isn’t working for me, as in it doesn’t show up at all on my Genesis Outreach site. Still hoping to find this kind of thing to work. Here’s the site I would like to emulate:

    http://www.longhollow.com/

    The thread looks dead, but I’m sure someone can help us?

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

You must be logged in to reply to this topic.