I am making the fixed navigation header. The whole web page doing fine when i set the relative postion and it also doesn’t cover the content of the page its all good.
However, when i set the postion to fixed, the header navigation bar cover the content.
How can i make the sticky navigation header without covering the web page content.
I would really appreciate if anyone could point out my mistake.
const select = document.querySelectorAll(".selectBtn");
const option = document.querySelectorAll(".option");
let index = 1;
select.forEach((a) => {
a.addEventListener("click", (b) => {
const next = b.target.nextElementSibling;
next.classList.toggle("toggle");
next.style.zIndex = index++;
});
});
option.forEach((a) => {
a.addEventListener("click", (b) => {
b.target.parentElement.classList.remove("toggle");
const parent = b.target.closest(".select").children[0];
parent.setAttribute("data-type", b.target.getAttribute("data-type"));
parent.innerText = b.target.innerText;
});
});
footer {
background: deeppink;
line-height: 3;
}
.left-sidebar {
background: dodgerblue;
}
.right-sidebar {
background: forestgreen;
}
.main-container,
.content {
display: flex;
flex-direction: column;
}
@media all and (min-width: 768px) {
.content {
flex-direction: row;
flex-wrap: wrap;
}
main {
flex: 2;
order: 2;
min-height: 80vh;
}
.left-sidebar {
order: 1;
flex: 1;
}
.right-sidebar {
flex: 1;
order: 3;
}
}
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #CCC;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
#item-link {
cursor: pointer;
}
.container4header {
width: 100%;
background: rgba(255, 255, 255, 0.5);
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.wrapper {
padding: 10px 30px 0px;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
display: flex;
justify-content: space-between;
align-items: center;
}
.search-button {
font-family: "Arial";
text-transform: none;
outline: 0;
background-color: #08ac4b;
width: 100px;
border: 1px solid;
padding: 10px 10px;
color: #ffffff;
font-size: 15px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
border-radius: 5px;
margin: 0 0 20px;
}
.searchitems {
font-family: "Arial";
outline: 0;
color: #000000;
background: #ffffff;
width: 350px;
border: 1px solid;
margin: 0 0 20px;
padding: 10px 10px;
box-sizing: border-box;
font-size: 15px;
border-radius: 5px;
}
.searchitems:focus {
outline: none;
border: 1px solid #08ac4b;
box-shadow: 0 0 1px #08ac4b;
}
#citySearch {
font-family: "Arial";
outline: 0;
color: #000000;
background: #ffffff;
width: 250px;
border: 1px solid;
margin: 0 0 20px;
padding: 10px 10px;
box-sizing: border-box;
font-size: 15px;
border-radius: 5px;
}
#citySearch:focus {
outline: none;
border: 1px solid #08ac4b;
box-shadow: 0 0 1px #08ac4b;
}
.button2 {
font-family: "Arial";
text-transform: none;
outline: 0;
background-color: #252525;
width: 100px;
border: 1px solid;
padding: 10px 10px;
color: #ffffff;
font-size: 15px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
border-radius: 5px;
margin: 0 0 20px;
}
.logo {
margin: 0 0 20px;
padding: 10px 10px;
}
.select {
display: inline-block;
font-size: 15px;
text-align: left;
box-sizing: border-box;
font-family: "Arial";
outline: none;
border: 1px solid;
background: #ffffff;
border-radius: 5px;
margin: 0 0 20px;
color: #000000;
position: relative;
width: 250px;
}
.select .selectBtn {
background: var(--bg1);
padding: 10px 10px;
box-sizing: border-box;
border-radius: 5px;
width: 100%;
cursor: pointer;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: #fff;
}
.select .selectBtn:after {
position: absolute;
top: 45%;
right: 15px;
width: 6px;
height: 6px;
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
border-right: 2px solid rgb(0, 0, 0);
border-bottom: 2px solid rgb(0, 0, 0);
transition: 0.2s ease;
}
.select .selectBtn.toggle {
border-radius: 5px;
}
.select .selectBtn.toggle:after {
-webkit-transform: translateY(-50%) rotate(-135deg);
transform: translateY(-50%) rotate(-135deg);
}
.select .selectDropdown {
box-sizing: border-box;
font-size: 15px;
padding: 5px;
text-align: left;
font-family: "Arial";
max-height: 240px;
color: #000000;
position: absolute;
width: 100%;
border-radius: 5px;
overflow-y: scroll;
overflow-x: hidden;
background: var(--bg1);
border-top: 1px solid #eee;
z-index: 1;
background: #ffffff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: top center;
transform-origin: top center;
visibility: visible;
transition: 0.2s ease;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
.select .selectDropdown .option {
padding: 10px;
box-sizing: border-box;
cursor: pointer;
}
.select .selectDropdown .option:hover {
background: #edf7f1;
}
.select .selectDropdown.toggle {
visibility: visible;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
<div class="main-container">
<header>
<div class="container4header">
<div class="wrapper">
<a class="logo" href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" height="30" alt=""></a>
<div class="center-group">
<div class="select">
<div class="selectBtn" data-type="firstOption">
Choose a category
</div>
<div class="selectDropdown">
<div class="option" data-type="firstOption">Choose a category</div>
<div class="option" data-type="firstOption">All categories</div>
<div class="option" data-type="firstOption">All categories</div>
<div class="option" data-type="firstOption">All categories</div>
<div class="option" data-type="firstOption">All categories</div>
<div class="option" data-type="firstOption">All categories</div>
<div class="option" data-type="firstOption">All categories</div>
<div class="option" data-type="firstOption">All categories</div>
<div class="option" data-type="firstOption">All categories</div>
</div>
</div>
<input id="citySearch" type="text" placeholder="City">
<input type="text" class="searchitems" placeholder="Search for an item">
<button type="submit" class="search-button">Search</button>
</div>
<div class="right-group">
<button type="submit" class="button2">Sign Up</button>
<button type="submit" class="button2">Login</button>
</div>
</div>
</div>
</header>
<div class="content">
<main>
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group">
</div>
<div id="products" class="row list-group">
<!-- Single product -->
<div id="item-link" class="item col-xs-4 col-md-3" onclick="window.location='https://www.youtube.com'">
<div class="thumbnail">
<img class="img-id" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<!-- end Single product -->
<div id="item-link" class="item col-xs-4 col-md-3" onclick="window.location='https://www.youtube.com'">
<div class="thumbnail">
<img class="img-id" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div id="item-link" class="item col-xs-4 col-md-3" onclick="window.location='https://www.youtube.com'">
<div class="thumbnail">
<img class="img-id" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div id="item-link" class="item col-xs-4 col-md-3" onclick="window.location='https://www.youtube.com'">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div id="item-link" class="item col-xs-4 col-md-3" onclick="window.location='https://www.youtube.com'">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/house2_gs4cr6.png" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div id="item-link" class="item col-xs-4 col-md-3" onclick="window.location='https://www.youtube.com'">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/greysofa_ys6lwl.png" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div id="item-link" class="item col-xs-4 col-md-3" onclick="window.location='https://www.youtube.com'">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/furniture_sddzpz.png" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div id="item-link" class="item col-xs-4 col-md-3" onclick="window.location='https://www.youtube.com'">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/sofa_xlb0hz.png" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div id="item-link" class="item col-xs-4 col-md-3" onclick="window.location='https://www.youtube.com'">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/pink_fby5uh.png" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div id="item-link" class="item col-xs-4 col-md-3" onclick="window.location='https://www.youtube.com'">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/couch_o9wlyx.png" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div id="item-link" class="item col-xs-4 col-md-3" onclick="window.location='https://www.youtube.com'">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/greysofa_pjqko4.png" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div id="item-link" class="item col-xs-4 col-md-3" onclick="window.location='https://www.youtube.com'">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520532750/blue_dfokic.png" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div id="item-link" class="item col-xs-4 col-md-3" onclick="window.location='https://www.youtube.com'">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520532750/orange_hlsunx.png" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div id="item-link" class="item col-xs-4 col-md-3" onclick="window.location='https://www.youtube.com'">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520532750/weird_yp8qxn.png" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div id="item-link" class="item col-xs-4 col-md-3" onclick="window.location='https://www.youtube.com'">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/furniture_sddzpz.png" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div id="item-link" class="item col-xs-4 col-md-3" onclick="window.location='https://www.youtube.com'">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/greysofa_ys6lwl.png" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->
</main>
<aside class="left-sidebar">LEFT SIDEBAR</aside>
<aside class="right-sidebar">RIGHT SIDEBAR</aside>
</div>
<footer>FOOTER</footer>
</div>
I want to be like this in this picture i used relative position but i want to make fixed position.
3
Answers
enter image description here
Is this how you want the webpage to look? Just add margin to the top of your content div.
In the comments you wrote that
position: sticky
doesn’t work. I don’t know why. Take a look at this snippet. As you can see, header withposition: sticky
doesn’t overflow the main content but is still fixed to top. I added these styles:I deleted these styles:
An Element with a
fixed
position will have the size of the browser viewport.Therefore, a
fixed
element withheight: 100%; width: 100%
is always going to cover the whole browser window, unless there’s a parent-element up the DOM withtransform: translate
, in which case the new "viewport" area will be of this parent element, and not of the window viewport.The same element with a
relative
position will only have the size of its parent element when it’s fully stretched.If you want to display a fixed header with a correct height, you can use this for example: