Help me make vertical menu more responsive

Community Forums Forums Design Tips and Tricks Help me make vertical menu more responsive

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Marcy 1 year, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #48370

    dev
    Participant
    Post count: 467

    Please see: http://newmediawebsitedesign.com/authors/book9/

    I’m using a modified version of Agency,

    In order to get a vertical menu I used the Genesis Custom Menu widget in a secondary sidebar. Works fine.

    But is is not as ‘responsive’ as I want it… when viewed on small device the menu is positioned at the bottom. (Put above URL into http://www.studiopress.com/responsive/ )

    This is OK, but is there a way to position it underneath the header like it would if it were a traditional horizontal menu?

    All ideas appreciated.

    Thanks.

    http://newmediawebsitedesign.com/authors/book9
    #50578

    Marcy
    Participant
    Post count: 383

    In genesis, the sidebar content is always after the main content, no matter where the sidebar is placed. You can change the order with jQuery, if you know how.
    But since Genesis is so flexible, you could try using 2 menus. Since you’re a Designer/Dev, I’ll just describe it; you’ll have to tweak the code to fit your site.

    I would add the custom sidebar menu to Primary Navigation Menu in your Dashboard under Appearance > Menu, so now you have the same menu twice, one in the sidebar and one under the header.
    In the CSS, give it display:none;
    I think it’s .menu-primary { display: none; }

    Then in the media query where the .sidebar width goes to 100%, change
    .menu-primary { display: block; }
    and
    #nav_menu-2 { display: none; } or maybe .widget_nav_menu {display: none;}

    You will need to keep the responsive CSS for the .menu-primary from the original Agency to have it display 100% width, if you’ve removed it.

    You may also need to add an additional media query for the sidebar menu going back to the desktop website size.
    Something like:
    @media only screen and (min-width: 961px) {
    #nav_menu-2 {
    display: block !important;
    }
    }
    Where the min-width is 1px larger than the size you used for the mobile width.


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

You must be logged in to reply to this topic.