Sticky Navbar Design in HTML
Sticky Navbar Design in HTML. In this article, I am going to tell you how you can create a very beautiful Website in HTML and CSS with simple steps. you just need to write a simple code of text to create this HTML website. we will use in this code HTML and simple internal CSS.
first of all, you have to create a folder, where you want to create a save you file of code and then drag it or open it on your text editor, after that you have to save this file by giving any name with the extension name HTML.
HTML Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Restaurant website template with html and css</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- header section start -->
<header>
<a href="#" class="logo"><img src="logo1.png"></a>
<!-- <a href="#" class="logo"><img style="width:200px;" src="logo.png"></a> -->
<nav class="navbar">
<a href="#home" class="active">home</a>
<a href="#about">about</a>
<a href="#menu">menu</a>
<a href="#team">team</a>
<a href="#reservation">reservation</a>
<a href="#blog">blog</a>
</nav>
<div class="icons">
<i class="fas fa-bars" id="menu"></i>
<i class="fas fa-search"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-shopping-cart"></i>
</div>
</header>
<!-- header section end -->
<section>
<h1>FITNESS<br> CLUB</h1>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<script type="text/javascript">
let menu = document.querySelector('#menu');
let navbar = document.querySelector('.navbar');
menu.onclick = () =>{
menu.classList.toggle('fa-times');
navbar.classList.toggle('active');
}
</script>
</body>
</html>CSS Code
@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected];300;400;500;700&display=swap');
:root
{
--light-red: rgba(200,35,54,.9);
--black: #000;
--box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
}
*
{
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
text-transform: capitalize;
transition: all .2s linear;
}
html
{
font-size: 62.5%;
}
/*navbar style start*/
header
{
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--light-red);
padding: 1.8rem 7%;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: var(--box-shadow);
z-index: 10000;
}
header .logo img
{
width:100px;
}
header .navbar a
{
font-size: 1.7rem;
padding: .5rem 1.5rem;
color: var(--black);
font-weight: 300;
border: .1rem solid transparent;
}
header .navbar a.active,
header .navbar a:hover
{
color: #fff;
border: .1rem solid rgba(205, 170, 124, 0.2);
}
header .icons i
{
cursor: pointer;
margin-left: .5rem;
height: 4.5rem;
width: 4.5rem;
line-height: 4.5rem;
background: var(--black);
text-align: center;
font-size: 1.7rem;
color: #fff;
}
header .icons i:hover
{
color: #fff;
background: var(--black);
border-radius: 100%;
color: var(--light-red);
}
header .icons #menu
{
display: none;
}
section
{
width: 100%;
height: 100vh;
background: #000;
position: relative;
background-image: url(back8.png);
background-size: cover;
background-attachment: fixed;
}
section h1
{
font-size: 150px;
padding: 200px 0 0 100px;
font-family: 'Fast Track', sans-serif;;
color: var(--light-red);
z-index: -1;
text-shadow: 5px 5px 2px rgba(255,255,255,.3);
}
/*navbar style end here*/
@media (max-width: 878px)
{
/*navbar media query*/
header .icons #menu
{
display: inline-block;
}
header .navbar
{
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #eee;
border-top: .1rem solid rgba(205,170,124,0.2);
border-bottom: .1rem solid rgba(205,170,124,0.2);
padding: 1rem;
clip-path: polygon(0 0,100% 0,100% 0,0 0);
}
header .navbar.active
{
clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
}
header .navbar a
{
display: block;
padding: 1.5rem;
margin: 1rem;
font-size: 2rem;
background: var(--light-red);
}
}
Here we completed our tutorial.
If you face any problem
please feel free to contact us.
Thanks for reading our post.
10 thoughts on “Sticky Navbar Design in HTML and CSS”
I was recommended this blog by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my problem. You're incredible! Thanks!
Everyone loves it whenever people get together and share opinions. Great blog, keep it up!
Asking questions are really pleasant thing if you are not understanding something totally, except this article provides nice understanding yet.
My partner and I stumbled over here by a different page and thought I may as well check things out. I like what I see so now i am following you. Look forward to looking over your web page repeatedly.
This is very fascinating, You are an overly skilled blogger. I've joined your feed and sit up for in search of more of your fantastic post. Also, I have shared your site in my social networks
Good blog post. I absolutely appreciate this site. Thanks!
Hi there I am so grateful I found your webpage, I really found you by error, while I was looking on Digg for something else, Nonetheless I am here now and would just like to say kudos for a tremendous post and a all round enjoyable blog (I also love the theme/design), I don't have time to read through it all at the minute but I have bookmarked it and also added your RSS feeds, so when I have time I will be back to read a lot more, Please do keep up the great work.
Great information. Lucky me I came across your site by chance (stumbleupon). I've saved it for later!
Greetings! Very useful advice within this post! It's the little changes that make the biggest changes. Many thanks for sharing!
Your style is so unique in comparison to other people I have read stuff from. I appreciate you for posting when you have the opportunity, Guess I will just book mark this web site.