<body>
<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
<a href="#" class="logo">
<img src="growmade2.png" style="height: 25px; width: 250px" alt="" />
</a>
</div>
<!-- Left-aligned links (default) -->
<a href="#news">SHOP</a>
<a href="#contact">EXPLORE</a>
<!-- Right-aligned links -->
<div class="topnav-right">
<a href="#search">MY CART</a>
</div>
</div>
** CSS**
.topnav {
position: sticky;
display: block;
background-color: rgb(255, 255, 255);
padding: 30px 80px 30px 50px;
}
.topnav a {
font-family: "Roboto", sans-serif;
font-family: "Roboto Condensed", sans-serif;
font-family: "Source Sans Pro", sans-serif;
font-weight: 900;
display: inline-block;
position: relative;
color: #000;
text-align: left;
margin: 0 10px;
padding-bottom: 2px;
text-decoration: none;
}
Hello I'm new in css. I want to create a website with static navigation bar but a can't display it static? Can anybody solve this problem? Thanks in advance!!!
Well, you could use fixed position to make a navbar sticky. eg:
.topnav {
position: fixed;
top: 0;
z-index: 99;
}
You need to add top: 0:
body {
margin: 0;
padding:0;
}
.topnav {
position: sticky;
top: 0;
display: block;
background-color: rgb(255, 255, 255);
padding: 30px 80px 30px 50px;
}
.topnav a {
font-family: "Roboto", sans-serif;
font-family: "Roboto Condensed", sans-serif;
font-family: "Source Sans Pro", sans-serif;
font-weight: 900;
display: inline-block;
position: relative;
color: #000;
text-align: left;
margin: 0 10px;
padding-bottom: 2px;
text-decoration: none;
}<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
<a href="#" class="logo">
<img src="growmade2.png" style="height: 25px; width: 250px" alt="" />
</a>
</div>
<!-- Left-aligned links (default) -->
<a href="#news">SHOP</a>
<a href="#contact">EXPLORE</a>
<!-- Right-aligned links -->
<div class="topnav-right">
<a href="#search">MY CART</a>
</div>
</div>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>try this :
for sticky navbar on top position
.topnav
{
position: sticky;
top:0;
}