Sridhar Katakam

Genesis and WordPress Tutorials

How to make Navigation be toggled by a hamburger MENU icon in Altitude Pro

by 6 Comments

A user asked,

I would like to ask the following question with regard to the article http://sridharkatakam.com/how-to-slide-toggle-primary-navigation-in-altitude-pro/

How do I make the MENU toggle from right to left (or let's say on the left of of the MENU icon)?
For now looks like it's only toggling at the top of the menu icon.

In this tutorial I show how responsive menu icon can be set to appear on desktop widths rather than wait till 800px. Clicking on the MENU icon will expand the navigation menu to its left and clicking on it again will fade it out.

Screenshots:

Default:

altitude-pro-menu-icon

After the MENU icon is clicked:

altitude-pro-menu-expanded

Screencast:

Step 1

In global.js replace

$( '.nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu' ).addClass( 'responsive-menu' ).before('<div class="responsive-menu-icon"></div>');
view raw gistfile1.js hosted with ❤ by GitHub

with

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • sri,

    whats the best way to replace the altitude menu with the hamburger and menu text, and then on click – have it open to a sidr menu instead of just sliding out the primary nav?

    Reply

  • Hi,
    nice tutorial! How can I add the functionality that the menu appears under the hamburger-menu icon? Like a dropdown?
    Here is a picture of the menu I want to achive:
    http://renzen-communications.ch/test/menu_total.png
    And this is the mainmenu in detail:
    http://renzen-communications.ch/test/menu_details.png
    The X to close the Menu isn’t important.

    Is this achiveable with some css? Is there an easy way to do it?

    I’m looking forward to your answer.

    Reply
    • >