Introduction
In this tutorial, we’re going to make a navigation bar that is mobile-friendly. When you’re done, you will have a better understanding of how to use media queries, know how to change the look of the same content and learn the importance of responsive web design.
If you are looking to make your websites work for mobile devices, this is for you. In order to complete this tutorial, you’ll need an IDE (code editor), a browser that supports developer tools (I suggest Firefox or Chrome) and a mindset to not only read and copy this tutorial, but understand why it works.
You’ll be able to use the skills and lessons in this tutorial in the real world when you develop any website or web application as more than 90% of internet users browse on a mobile device (research from Statista).
Body
Example
The example I’m going to use for this tutorial is turning this simple navigation:
[ IMAGE OF DESKTOP NAVIGATION BAR ]
into this mobile friendly navigation:
[ IMAGE OF MOBILE NAVIGATION BAR ]
based on the device viewport (or the screen size).
Steps
Step 1: Set up your navigation code
Step 2: Style your navigation
Step 3: Use Developer Tools to View in Mobile Viewport
Step 4: Create a media query
Step 5: Adjust the navigation style
Step 6: Use Developer Tools to View in Mobile Viewport Again
Final Result
Following the steps in this tutorial will make your navigation look much better on smaller screensizes like phones and tablets. You can use my live demo example below to see this navigation in action:
[ EMBED OF CODEPEN ]
Conclusion
This tutorial holds much more information than creating one type of mobile navigation. It shows you important steps on using media queries to transform your whole website into a new style for other audiences and viewers!
Top comments (0)