Building a Blog website: #1 Create a Responsive CSS Navigation Bar With Drop Down using Flexbox

A responsive navigation bar with drop-down menus is an easy way to create a beautiful website. This tutorial will show you how to build one using HTML5, CSS3, and Javascript.

Building a Blog website: #1 Create a Responsive CSS Navigation Bar With Drop Down using Flexbox
Create a Responsive CSS Navigation Bar With Drop Down using Flex

 I started coding back in 2019, and up to this point, one of those parts that I have been having a rough time grasping is CSS. Yeah, that's right; I don't know how good your CSS skills but man, I got to have to confess that it humbles me; maybe that's why I have never liked coding as a group for a very long time, but after long hours of practicing, I'm happy to share with you my knowledge in Programming.

So ill be starting with something small as we advance at later stages. I am trying to build and Blog website, and this is the first part of this excellent tutorial

Responsive web design (RWD) is a technique that allows websites to adapt to different screen sizes, so users can view content on any device without having to scroll horizontally or vertically. This tutorial will teach you how to use HTML5, CSS3, and jQuery(This concept can still be achieved without Jquery, a Javascript library) to create a responsive navigation bar with drop-down menus.

 

Start by Creating a Basic Structure.

To start building our navigation bar, let's first set up some basic structure. We'll begin by creating our header element and then have a couple of classes inside it, followed by our Menu items in the form of unordered Lists. We will add one more unordered list inside the parent list, and a concept referred to as Nesting of Elements

  

 
    <header>
      <div class="container flex">
        <span class="logo">SLEDGE.CO.KE</span>
        <ul class="parent">
        <li><a href="#">Home</a></li>
        <li><a href="#">Blockchain</a></li>
        <li><a href="#">Gadgets</a></li>
        <li><a href="#">Web 3.0</a></li>
        <li class="firstChild"><a href="#">Admin</a>
        <ul>
          <li><a href="#">Dashboard</a></li>
        <li ><a href="#" class="logout">Logout</a></li>
        </ul>
        </li>
      </ul>
     
      <i class="fa-solid fa-bars openMenu"></i>
      <i class="fa-solid fa-xmark closeMenu"></i>
     
      </div>
    </header>

Add Some Styling.

Now that we've got our basic structure laid out, we need to style it. First, we'll give our header background color and set a couple of Global styling that we will use later to create other page sections. Next, we'll look at the parent list and a display of Flex, and then the first chile, we position it as relative while giving its direct element a position of absolute to create the beautiful drop-down Menu.

 @import url('https://fonts.googleapis.com/css2?family=Cormorant+SC&display=swap');



*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body{  
    font-family: 'Cormorant SC', serif;
    line-height: 1.2;
    overflow-x: hidden;
}
h1,h2{
    font-weight: 200;
}
p{
    margin: 0 20px;
}
img{
    width: 100%;
    object-fit: cover;
}
.close-menu{
    display: none;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
    text-transform: capitalize;
    color: #333;
}
a:hover{
    color: orangered;
    text-transform: uppercase;
   
}
.container{
width: 98vw;
margin: 0 auto;
height: 100%;
overflow: visible;

}
.flex{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-items: center;
    justify-content: center;
    height: 100%;
}

Build the Menu Items.

We will start by creating a list of links inside the header. To do so, we'll use the ul tag. Inside the ul tag, we'll place li tags containing each link. We have also assigned class names to our UL tag and li tags, allowing us to style each list individually later.

 header{

    background-color: #35424a;
    width: 100vw;
    height: 60px;    
}
header .logo,
header .close{
    color: orangered;
}
header .closeMenu,
header .openMenu{
    display: none;
}

header .flex{
    justify-content: space-between;
}

Style the Drop-down Menus.

Now that we've set up our main navigation bar let's add some styling. As mentioned before, we will give our child a position of relative and head-on to provide the elements under the first child a position of absolute with a couple of styling. Now to make sure that its contents do not appear unless hovered on, make sure to give visibility hidden. To show the contents back, your Code should look like this.

 header .parent{

    display: flex;
    align-items: center;
    gap: 20px;
   
}
header .parent a{
   color: antiquewhite;
   
}
header .firstChild{
    position: relative;
}
header .firstChild ul{
    position: absolute;
    top: 125%;
    right: 0;
    display: flex;
    flex-direction: column;
    visibility: hidden;
   
}
header .firstChild:hover > ul{
  visibility: visible;
   
}
header .firstChild li a{
    padding: 1rem;
    background-color: #35424a;
    width: 100%;
    display: block;
   
}
header .firstChild li:last-child a{
    color: red;
}

Finish off with Mobile Responsive

 

Some prefer doing the Mobile-first before heading to desktop later, but I guess the latter works perfectly for me. However, depending on your comfy, you can choose to go either. Doing Mobile responsive allows your website to resonate with various Screen Sizes(Desktop, Mobile, and Tablets)

@media(max-width:500px){
    header{
        width: 100vw;
    }
header .openMenu{
display: inline-block;
background: transparent;
color:white;
cursor: pointer;
}
header .closeMenu{
    display: none;
}

header .flex{
    position: relative;
}
header .parent{
    position: absolute;
    flex-direction: column;
    top: 100%;
    right: 0;
    width: 12rem;
    align-items: center;
    justify-content: center;
    gap: 0;
    display:none;
}
header .parent > li{
   width: 100%;
   height: 4.5 rem;
   line-height: 1.8;
   display: flex;
   align-items: center;
   background-color: #35424a;
}
header .parent > li a{
    border-radius: 0;
    width: 100%;
    padding:0 2rem;
    display: flex;
    align-items: center;
    height: 100%;
 }
}

Check the source code of this particular article on my Github profile