Making a Responsive Navigation

By default a mobile ready navigation is often setup using a drop down navigation that has the list of links hidden. When the browser window is large enough, in desktop view, the menu often changes into a normal list of links that is always visible. The following steps are required to get this functionality:

1. Create the Drop Down Navigation Bones: Follow the instructions on the "Drop Down Navigation Bones" page, a drop down navigation will need to be created.
2. Create a Media Query: A media query will need to be setup that changes the CSS when the browser has exceeded a specific size.
3. Hide the Label & Checkbox: Add CSS to the media query that makes the mobile menu label and checkbox hidden.
4. Make the Menu Visible: Add CSS to the media query that ensures the menu is visible.
5. Add Non-mobile Styles: Add CSS to the media query that will change the style of the menu when it is in a non-mobile view.

1) Create the Drop Down Navigation Bones

Follow the instructions on the "Drop Down Navigation Bones" page, a drop down navigation will need to be created. This will give you the basic mobile functionality for the responsive navigation.

2) Create a Media Query

A media query will need to be setup that changes the CSS when the browser has exceeded a specific size. It is often good to switch from a mobile menu (hidden drop down navigation) to a regular menu when the browser is larger than 800px. This is because there is enough room for the menu links to all be displayed. This is done by looking for a minimum width of 800px in the media query (see the media queries page for more information on media queries).

In this example we will set the media query to look for a smaller window size since we have less screen to play with in our playground. This media query would be added after the CSS written for the drop down navigation bones CSS.

@media (min-width: 500px){
     
}

3) Hide the Label & Checkbox

When the mobile menu is not needed the label and checkbox should be hidden. This is because when the browser is large enough to show the whole menu it is unnecessary to toggle the menu on/off. This will be added to the media query.

The following code is only applied when the browser is over 500px, and the label that is found in the nav, and the <input> element with the ID of #toggle is hidden with display: none;

@media (min-width: 500px){
     nav label, #toggle{
          display: none; 
     }
}

4) Make the Menu Visible

The drop down navigation bones made the menu links invisible when the checkbox was unchecked. This functionality will persist when the menu is not in a mobile view. If the checkbox is checked the menu will be visible when the media query is called, and when the checkbox is unchecked the menu will be completely invisible. This can be fixed by adding a rule to the media query that makes the menu visible even when the checkbox is unchecked.

This rule is only applied when the #toggle input checkbox is not checked, and if it is not checked it makes the sibling #menu <ul> element visible.

@media (min-width: 500px){
     nav label, #toggle{
          display: none; 
     }

     #toggle:not(:checked) ~ #menu{
       display: block; 
     }
}

5) Add Non-mobile Styles

Additional styles will be applied when the menu is displayed in a non-mobile view. These styles will be added to the media query. To demonstrate this, the following code will change the menu from a vertical drop down menu to a horizontal menu when the browser is wider than 500px.

@media (min-width: 500px){
     nav label, #toggle{
          display: none; 
     }
     #toggle:not(:checked) ~ #menu{
       display: block; 
     }
     
     #menu li{
       display: inline-block; 
     }
}