Thread Starter
mellyg
(@mellyg)
The line of code I am unsure of is below
<a href="#" id="pull">Menu</a>
Thread Starter
mellyg
(@mellyg)
Have also tried the following code
<nav class="group">
<?wp_nav_menu(array('menu'=>'Header Menu'));?>
<a href="#" id="pull">Menu</a>
<nav><!--end of nav bar-->
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Which theme is this regarding?
Thread Starter
mellyg
(@mellyg)
It’s aniximander – a theme that comes with a lynda.com tutorial.
The navigation is currently not responsive so I am looking at ways to make it responsive – like in the way the attached tutorial has done it, just having some trouble implimenting it.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Basically all you need to do is:
- Duplicate the menu you have at the moment and hide it with CSS. You’d probably style it like it is on that hongkiat tutorial.
- Add a link to trigger the menu and hide that for now
- In a mobile media query show the trigger link
- Add some jQuery to toggle (hide and show) the menu on click/focus of the trigger link
Thread Starter
mellyg
(@mellyg)
Are these the same instructions as in the tutorial?
I have got it working on an html website fine – but am unsure of how to get it working in WordPress, because the navigation code looks a little different.
Hmm… and then what happens when a keyboard navigator or screen reader user tries to tab through a page on a desktop machine? You end up with a link that will have focus but no content – creating confusion and a potential accessibility issue.
I’d argue that this needs to be handled using pure CSS and @media.
Thread Starter
mellyg
(@mellyg)
Oh ok, I will have to read up on how to do this with CSS.
Do you know of any tutorials that show how to do this?
I’d suggest that you look for tutorials on responsive web design.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You end up with a link that will have focus but no content
How come if you use jQuery to trigger the menu on click/focus?
Thread Starter
mellyg
(@mellyg)
Yes, have been looking all over the web for them, but its hard to find one that relates to wordpress.
It doesn’t have to relate to WordPress. The basics of responsive design apply to any site that uses CSS.
Thread Starter
mellyg
(@mellyg)
Yes, but i am never sure how to impliment the javascript into the functions.php file.
How come if you use jQuery to trigger the menu on click/focus?
Because the menu links may still be available (albeit hidden) & therefore focus-able on a non-mobile site. Although display:none; does hide content from many screen readers, it should never be relied upon in a situation such as this. If you’re going to use a jQuery approach, it would be better to generate the entire new menu using jQuery and not bother hiding it in the first place.
Going back to responsive design for a moment, if you have a menu that is (say) 400px wide and a screen that’s only 300px wide, then something has to give. You could perhaps use a smaller font, less padding, smaller margins. Or you could just re-think how to display the menu to the best advantage on a smaller devices – perhaps as a vertical menu for example. That way you avoid any code bloat and probably side-step any new access barriers.
Thread Starter
mellyg
(@mellyg)
Any chance you can tell me what I would need to put into the functions.php file if I was to use this one http://responsive-nav.com
