About
Responsive Sidenav Example
w3schools.com - CSS Navigation Bar
This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.
We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.
You will learn more about media queries and responsive web design later in our CSS Tutorial.
Resize the browser window to see the effect.
> 900px - Sidebar for Desktop
< 900px - Horizontal Bar for Tablets
< 400px - Horizontal Bar for Mobiles
Responsive Sidenav Example@gpmx.org