Dynamik

Dynamik Responsive Design

To make your primary navigation menu into a “hamburger menu” on mobile:

1. Go to the Genesis > Dynamik Design menu.
2. Click the Responsive tab.
3. Click the Show/Hide Options button.
4. Under the Default Media Query Options section, click the Navbar Media Query Styles dropdown and select Mobile Dropdown.
5. Find the text box next to “Toggle/Dropdown Menu 1 Text” and replace the text with a single space.
6. Click Save Changes.
7. Go to the Appearance > Menus menu.
8. Select your Primary Navigation menu and click the Select button.
9. Scroll to the bottom and check the box next to “Responsive Dropdown 1.”
10. Click the Save Menu button.
11. Go to the My Custom CSS menu.
12. Add the following CSS:

    • #dropdown-nav .responsive-icon-bar, #dropdown-subnav .responsive-icon-bar {
       float: none;
       margin: 1px auto;
       }

    • #dropdown-nav .responsive-menu-icon {
       float: none;
       padding: 0 0 15px 0;
       }

13. Click the Save button.

To make your header navigation menu into a “hamburger menu” on mobile:

1. Go to the Genesis > Dynamik Design menu.
2. Click the Responsive tab.
3. Click the Show/Hide Options button.
4. Under the Default Media Query Options section, click the Navbar Media Query Styles dropdown and select Mobile Dropdown.
5. Find the text box next to “Toggle/Dropdown Menu 1 Text” and replace the text with a single space.
6. Click Save Changes.
7. Go to the Appearance > Menus menu.
8. Select your Header Navigation menu and click the Select button.
9. Scroll to the bottom and check the box next to “Responsive Dropdown 1.”
10. Click the Save Menu button.
11. Go to the My Custom CSS menu.
12. Add the following CSS:

    • #dropdown-nav .responsive-icon-bar, #dropdown-subnav .responsive-icon-bar {
       float: none;
       margin: 1px auto;
       }

    • #dropdown-nav .responsive-menu-icon {
      float: none;
      padding: 0 0 15px 0;
      }

    • @media only screen and (max-width: 479px) {
       .site-header .widget-area {
       display: none;
       }
       }

13. Click the Save button.