• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Horizontal Subnav Width (Magazine theme)

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: not resolved

Tagged: child page, horizontal, menu, nav, subnav

  • This topic has 4 replies, 4 voices, and was last updated 9 years, 8 months ago by PresterJohn.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 10, 2013 at 8:41 am #40287
    eef
    Member

    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/
    May 14, 2013 at 6:05 pm #40927
    asdweb
    Member

    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

    May 15, 2013 at 7:52 am #40988
    eef
    Member

    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!

     

     

    May 17, 2013 at 12:17 pm #41406
    ahtimes
    Member

    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!

     

    July 11, 2013 at 4:33 pm #50294
    PresterJohn
    Member

    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?

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble