How to Create a Responsive Dropdown Navigation Using Only CSS

How to Create a Responsive Dropdown Navigation Using Only CSS

This tutorial will guide you through creating a responsive dropdown navigation using CSS only, with the help of CSS flexbox and the “checkbox hack”. Basic knowledge of HTML and CSS is required to follow along. The top navigation bar is vital for any website. Most of the sites have a similar structure for a dropdown navigation menu, but differ in their styles and implementation. Here is one implementation that can be used universally – since it is responsive and doesn’t need JavaScript to toggle the dropdown on mobile devices. Also, we use the “mobile-first” approach to build this. Here is what you will learn to create by the end of this tutorial. Let’s get started. Mobile First We will be following the “mobile-first” approach which involves designing a website starting with the mobile version first and then proceeding to design for larger screens. Read more about why mobile-first approach is important in 2020. Setting up Create a blank HTML document and name it index.html. Add the basic HTML skeleton. If you use Visual Studio Code, all you need to do is type “!” and hit enter. You will end up with this. Document I have used ‘Font Awesome’ for the hamburger menu icon on the right top. So add the following line below the title tag to be able to use this font. Create your stylesheet and name it styles.css. Link the stylesheet to your HTML document below the Font Awesome CDN link using I have used this below image as a logo. You can save the same as logo.png or choose to include your own. HTML Add the following HTML code within body Home About Services Contact We have a header element which will form the dark navigation bar containing everything else. There is a menu-wrap div which acts as the container for the logo, navigation links and the menu icon. You will not see anything great if you open up this file in your browser yet. So, let’s add some CSS. CSS In your styles.css, begin with some common styles for all elements: * { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } Add these styles to the header element. header { height: 70px; background-color: #22292F; padding: 10px 0; } You will now see that dark navigation bar stretching the full width of the browser. Before you proceed further, make sure you view this page in responsive mode in your browser and select any mobile device size – because we are designing for mobile first. Now, add these styles to the menu-wrap class: .menu-wrap { display: flex; justify-content: space-between; padding: 0 15px; } We use display:flex to make all the child elements occupy the free space available horizontally. The property justify-content is set to space-between to stretch those elements as far apart as possible. Let’s style each of those child elements one by one. .logo-img { height: 50px; } .menu-icon { font-size: 2.4em; color: #ffffff; line-height: 50px; } With this, we have the logo and icon in the perfect positions with correct sizes. Coming to the menu links – we need to absolutely position the whole menu below the bar on mobile phones. First add: nav { position: absolute;  » Read More

Like to keep reading?

This article first appeared on 1stwebdesigner.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply