DEV Community

loading...
Cover image for Learn to make a Responsive Highlighted Navigation Bar | #code #htmlcss | Coding Samrats

Learn to make a Responsive Highlighted Navigation Bar | #code #htmlcss | Coding Samrats

Coding Samrats
Get Source Code Files - https://codepen.io/codingsamrats
・2 min read

In this post I will teach you how to make a Highlighted Navbar using just HTML and CSS

For Video tutorial click here

Basically we will use ul tag , Flex property and basic hover feature , color and font features

First, Let's write the HTML code ,
how in most of the navbars we use 'ul' tag here also we do the same.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Highlighted Navabar</title>
</head>
<body>
    <ul  class="tab">
        <li><a class="link" id="active" href="highlightednav.html">Home</a></li>
        <li><a class="link" href="cards.html">Blog</a></li>
        <li><a class="link" href="">Contact</a></li>
    </ul>
  </body>
</html> 
Enter fullscreen mode Exit fullscreen mode

Now it's CSS time :)

Let's now import a Font which we will use

 @import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
Enter fullscreen mode Exit fullscreen mode

Now we will center the navbar using flex and padding , also make the list-style none

 .tab {
        display: flex;
        justify-content: center;
        padding-top: 40vh;
        padding-bottom: 40vh;
        list-style: none;
    }
Enter fullscreen mode Exit fullscreen mode

Now we will make the general changes to the 'links'

     .link  {
        text-align: center;
        padding: 1rem;
        text-decoration: none;
        text-transform: uppercase;
}
Enter fullscreen mode Exit fullscreen mode

Now lets add color 😁 to the link text and edit its font features :) (add this to '.link' itself

        color: #000;
        font-size: 35px;
        font-family: 'Ubuntu', sans-serif;
Enter fullscreen mode Exit fullscreen mode

Time to add 'hover' effect to links (😑 just need to change the color)

 .link:hover {
        color: #FF4D50;
    }
Enter fullscreen mode Exit fullscreen mode

Now we will edit "#active" id so that in particular link will highlight

 #active {
        color: #f35659;
        border-bottom: 2px solid #FF4D50;
    }
Enter fullscreen mode Exit fullscreen mode

Now we will make it responsive , we will reduce font-size, padding and display:block; 💻 📱

@media (max-width: 800px) {
    .tab {
        display: block;
        padding-right: 2rem;

    }
    .link {
        display: block;
        font-size: 30px;
        padding: 0.6rem;
    }
}
Enter fullscreen mode Exit fullscreen mode

All the source code is BELOW 🔽

Support us by liking ❤ this post and
Follow us on other Social Media Platforms 🔽
Support Us
Just follow it's free 😎

Discussion (0)