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 2 years, 4 months ago.

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


    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!



    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



    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!





    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!




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


    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:


    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.