Responsive Menu replaces content

Community Forums Forums Design Tips and Tricks Responsive Menu replaces content

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  David Chu 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #118275

    TGScreative
    Member
    Post count: 20

    I create a responsive dropdown menu in Genesis using code I found here
    http://bradpotter.com/create-a-responsive-mobile-menu-from-the-header-navigation-menu/
    The menu look great on the home page. The horizontal menu is converted to a vertical menu and it is easy to select the page you want to visit.
    Two problems though on secondary pages.
    1. The page content doesn’t appear!
    2. The menu is way too long to appear on each page. Better if the submenu items are hidden under menu headers are clicked on. Or the entire menu is replaced with a hamburger icon.
    Any suggestions on how to go about getting the content back again? And creating a workable secondary page menu?

    http://jeffcohan.net/lcc/
    #118390

    David Chu
    Participant
    Post count: 1371

    Hi,
    An interesting question. It illustrates the true evil of excessive dropdowns, which are adored by “the professions”, such as doctors, lawyers, etc. OK, end of rant. :)

    Brad would tell you that the answer is right in the title of the article – this is for a menu that’s based in the header, not the primary menu. BUT I believe I can steer you in the right direction. You have a fixed height on that primary menu. So when the thing goes all vertical, the browser thinks that it’s still short, and thus does not push the content down.

    Try this little bit of CSS, which allows the menu to breathe when it gets longer, at around iPad portrait size. Suddenly content will be visible, as it’s properly pushed down like normal. Then since you can see it, you can adjust other styling to taste.

    @media only screen and (max-width: 1023px) {
    
    	.nav-primary {
    		height: auto;
    	}
    
    }

    Cheers, Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    #119044

    TGScreative
    Member
    Post count: 20

    Thanks David. That does seem to help to view content.
    I agree with you about the bloated navigation.

    Any ideas how to compress the navigation into a hamburger icon or something else, so it won’t take up most of page real estate?

    #119842

    David Chu
    Participant
    Post count: 1371

    Hi,
    Those hamburger menus are very complicated. I’d suggest leaving well enough alone unless you want to junk all the work you just did, and start over.

    If you’re up for lots more coding, adapting for your site, and debugging, you can try this:

    http://ozzyrodriguez.com/tutorials/genesis/genesis-responsive-menu-2-0/

    Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

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

You must be logged in to reply to this topic.