Making a menu responsive

  • Hi

    I am trying to make my menu responsive and using the code from this site https://www.hongkiat.com/blog/responsive-web-nav/

    My problem is getting the @media only screen and (max-width : 480px) to work.

    The code asks for:

    <nav class="clearfix">
    <ul class="clearfix">
        <li><a href="#">Home</a></li>
        <li><a href="#">How-to</a></li>
        <li><a href="#">Icons</a></li>
        <li><a href="#">Design</a></li>
        <li><a href="#">Web 2.0</a></li>
        <li><a href="#">Tools</a></li>
    </ul>
    <a href="#" id="pull">Menu</a>
</nav>

    My question is where do I put the line of code Menu Does is go in the header or in the function file. I have tried putting it:

    <div id="nav-bar-case">
	<nav class="group">
    	<?wp_nav_menu(array('menu'=>'Header Menu'));?>	

	<nav><!--end of nav bar-->
     <a href="#" id="pull">Menu</a>
</div><!--end of nav bar case-->

    But no luck – anyone know what do do?

Viewing 15 replies - 1 through 15 (of 17 total)
  • 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:

    1. 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.
    2. Add a link to trigger the menu and hide that for now
    3. In a mobile media query show the trigger link
    4. 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 https://responsive-nav.com

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Making a menu responsive’ is closed to new replies.