Title: Sticky responsive navigation
Last modified: February 15, 2017

---

# Sticky responsive navigation

 *  [alexsc13](https://wordpress.org/support/users/alexsc13/)
 * (@alexsc13)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/sticky-responsive-navigation/)
 * Hi, I have been searching with Google for the last 2 hours now but I cannot find
   what I am looking for.
 * I am looking for a tutorial on howto make a sticky navigation switching to a 
   hamburger menu based on media query size.
 * I managed to make my sticky navigation with jQuery but I still have problems 
   to change it to a hamburger one when needed. So I would appreciate it very much
   if someone could point me to a tutorial to do all that with WordPress. Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Luis Sacristán](https://wordpress.org/support/users/displaynone/)
 * (@displaynone)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/sticky-responsive-navigation/#post-8808574)
 * Hi
 * I love Codrops scripts:
    [https://tympanus.net/codrops/2015/10/21/page-stack-navigation/](https://tympanus.net/codrops/2015/10/21/page-stack-navigation/)
   [https://tympanus.net/codrops/2014/09/16/off-canvas-menu-effects/](https://tympanus.net/codrops/2014/09/16/off-canvas-menu-effects/)
   [https://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/](https://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/)
 * What should you do?
 * You have the burger icon with the menu inside a layer:
 *     ```
       <div class="menu_container">
         <a href="#" class="menu_button">Menu icon</a>
         <div class="menu">
           <ul>
             <!-- Your menu -->
           </ul> 
         </div>
       </div>
       ```
   
 * With this CSS:
 *     ```
       .menu_container {
         position: fixed;
       }
   
       .menu_container .menu {
         display: none;
       }
       ```
   
 * Finally you should toggle the menu when the burger is clicked:
 *     ```
       jQuery(document).ready(function() {
         jQuery('.menu_button').click(function() {
           jQuery('.menu').toggle();
         }
       }
       ```
   
 * Hope it helps you
 *  Thread Starter [alexsc13](https://wordpress.org/support/users/alexsc13/)
 * (@alexsc13)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/sticky-responsive-navigation/#post-8810121)
 * Thanks a lot for you help, I actually managed to figure out what I was doing 
   wrong and got to work what I was working on before. Guess I just needed a break
   🙂

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Sticky responsive navigation’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 2 replies
 * 2 participants
 * Last reply from: [alexsc13](https://wordpress.org/support/users/alexsc13/)
 * Last activity: [9 years, 4 months ago](https://wordpress.org/support/topic/sticky-responsive-navigation/#post-8810121)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics