Mobile Responsive Hierarchy Menu with Hamburger

[Genesis Child]

Hey guys,

Does anybody know how to do this?

http://strategy.yoastdemo.com/

If you look at this theme when you put it into mobile view the menu goes into a hamburger menu option. When you click the hamburger all your pages go into a hierarchy type view. I know how to set up your basic mobile responsive menus with hamburger function but when you open out the menu the problem I am having with my site is that the sub-sub pages on the right hand side jump out to the right disappearing off the screen, and can't be used.

I used this code initially:

http://bradpotter.com/create-a-responsive-mobile-menu-from-the-primary-navigation-menu/

I suppose if any one knows a way to make the sub-sub pages on the right side of the screen 'spring out' to the left instead this would resolve my issue. Otherwise does anyone know how to make a menu look like the one in the first link I posted (when in mobile view of course).

I'm using the Genesis Sample Child Theme

Thanks in advance,

GC

P.S. I have actually purchased the child theme in the first link so if anyone wants to have a look at the stylesheet to get an idea of how to do it - just let me know 😉

P.S.S I won't actually be using the Yoast Strategy Child Theme. I was going to initially but it is just so limiting in so many other ways I have reverted back to the Genesis Sample Child Theme.

P.S.S. I'm actually having mad problems with my menu on regular sized screens too as I actually have sub-sub-sub-sub pages o.O - does anyone have a better way of handling this type of situation across all formats?

http://strategy.yoastdemo.com/

[Genesis Child]

Wouldn't let me edit the original post again, lol.

Ideally if I could stop my sub pages 'springing out' to the right (or left) and kind of just have them open up as further drop downs this would be ideal so they don't end up spanning all the way across the screen.

So like this:

Page
_Page 1
_Page 2
_Page 3
__Page 3.1
__Page 3.2
__Page 3.3
___Page 3.3.1
___Page 3.3.2
___Page 3.3.3

Instead of:

Page
_____Page 1
_____Page 2
_____Page 3
____________Page 3.1
____________Page 3.2
____________Page 3.3
_____________________Page 3.3.1
_____________________Page 3.3.2
_____________________Page 3.3.3

Thanks 😉

[Genesis Child]

Solved my own problem:

Responsive Website Navigation for Genesis WordPress Themes

Works great.

If anyone else has any other ways of doing that you are willing to share. By all means do.

GC

[Author]

Posts