Title: Making a menu responsive
Last modified: August 21, 2016

---

# Making a menu responsive

 *  [mellyg](https://wordpress.org/support/users/mellyg/)
 * (@mellyg)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/)
 * Hi
 * I am trying to make my menu responsive and using the code from this site [http://www.hongkiat.com/blog/responsive-web-nav/](http://www.hongkiat.com/blog/responsive-web-nav/)
 * My problem is getting the [@media](https://wordpress.org/support/users/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](https://wordpress.org/support/topic/making-a-menu-responsive/?output_format=md#)
   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)

1 [2](https://wordpress.org/support/topic/making-a-menu-responsive/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/making-a-menu-responsive/page/2/?output_format=md)

 *  Thread Starter [mellyg](https://wordpress.org/support/users/mellyg/)
 * (@mellyg)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/#post-4098821)
 * The line of code I am unsure of is below
 * `<a href="#" id="pull">Menu</a>`
 *  Thread Starter [mellyg](https://wordpress.org/support/users/mellyg/)
 * (@mellyg)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/#post-4098826)
 * 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](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 9 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/#post-4098860)
 * Which theme is this regarding?
 *  Thread Starter [mellyg](https://wordpress.org/support/users/mellyg/)
 * (@mellyg)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/#post-4098862)
 * 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](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 9 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/#post-4098879)
 * 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](https://wordpress.org/support/users/mellyg/)
 * (@mellyg)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/#post-4098881)
 * 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.
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/#post-4098887)
 * 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](https://wordpress.org/support/users/media/).
 *  Thread Starter [mellyg](https://wordpress.org/support/users/mellyg/)
 * (@mellyg)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/#post-4098893)
 * 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?
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/#post-4098896)
 * I’d suggest that you look for tutorials on responsive web design.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 9 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/#post-4098899)
 * > 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](https://wordpress.org/support/users/mellyg/)
 * (@mellyg)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/#post-4098901)
 * Yes, have been looking all over the web for them, but its hard to find one that
   relates to wordpress.
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/#post-4098904)
 * It doesn’t have to relate to WordPress. The basics of responsive design apply
   to any site that uses CSS.
 *  Thread Starter [mellyg](https://wordpress.org/support/users/mellyg/)
 * (@mellyg)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/#post-4098905)
 * Yes, but i am never sure how to impliment the javascript into the functions.php
   file.
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/#post-4098912)
 * > 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](https://wordpress.org/support/users/mellyg/)
 * (@mellyg)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/#post-4098914)
 * 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](http://responsive-nav.com)

Viewing 15 replies - 1 through 15 (of 17 total)

1 [2](https://wordpress.org/support/topic/making-a-menu-responsive/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/making-a-menu-responsive/page/2/?output_format=md)

The topic ‘Making a menu responsive’ is closed to new replies.

 * 17 replies
 * 4 participants
 * Last reply from: [Twohedz](https://wordpress.org/support/users/twohedz/)
 * Last activity: [12 years, 6 months ago](https://wordpress.org/support/topic/making-a-menu-responsive/page/2/#post-4099192)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics