This content originally appeared on DEV Community and was authored by Coding Samrats
In this post I will teach you how to make a Highlighted Navbar using just HTML and CSS
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>
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');
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;
}
Now we will make the general changes to the 'links'
.link {
text-align: center;
padding: 1rem;
text-decoration: none;
text-transform: uppercase;
}
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;
Time to add 'hover' effect to links (? just need to change the color)
.link:hover {
color: #FF4D50;
}
Now we will edit "#active" id so that in particular link will highlight
#active {
color: #f35659;
border-bottom: 2px solid #FF4D50;
}
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;
}
}
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 ?
This content originally appeared on DEV Community and was authored by Coding Samrats
Coding Samrats | Sciencx (2021-06-08T04:00:13+00:00) Learn to make a Responsive Highlighted Navigation Bar | #code #htmlcss | Coding Samrats. Retrieved from https://www.scien.cx/2021/06/08/learn-to-make-a-responsive-highlighted-navigation-bar-code-htmlcss-coding-samrats/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.