Related
position: sticky is not working in my code
I have tried different properties but nothing seems to work
codepen: https://codepen.io/iabzeet/pen/qBmGyLb
help me solve this problem
#title{
font-family: 'Inknut Antiqua', sans-serif;
color: rgb(243, 30, 112);
font-size: 12px;
position: relative;
top: 24px;
display: flex;
flex-direction: row;
}
.logo{
width: 4%;
position: relative;
top: 20px;
display: flex;
flex-direction: row;
}
.top-container {
padding: 60px 30px 30px 30px;
margin: -80px -6px 0px -30px;
background-color: #f1f1f1;
display: flex;
justify-content: center;
position: relative;
background-image: linear-gradient(-45deg,blue,white,yellow);
}
body{
box-sizing: border-box;
}
#header-img{
width: 3%;
padding: 0;
display: flex;
position: relative;
top: 2px;
}
nav {
position: sticky;
top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 20%;
background-color: #333;
width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
}
li {
list-style: none;
margin-right: 70px;
font-size: 25px;
font-weight: bold;
}
li a {
display: block;
color: white;
text-align: center;
padding: 3px 10px;
text-decoration: none;
}
li a:hover {
background-color: #04AA6D;
border-radius: 5px;
}
ul {
list-style-type: none;
margin: -48px -6px 0px -10px;
padding: 9px;
display: flex;
flex-direction: row;
}
#cover{
margin: 0.5px -10px 0px -10px;
position: fixed;
top: 0px;
display: grid;
width: 100%;
margin-right: -98px;
height: 550px;
object-fit: cover;
align-self: center;
z-index: -1;
opacity: 0.8;
}
.container {
height: 100%;
padding: 0.01em 16px;
padding-top: 0.01em;
padding-right: 0px;
padding-bottom: 0.01em;
padding-left: 0px;
display: grid;
position: relative;
justify-items: center;
}
#sml{
position: absolute;
display: grid;
color: white;
transform: translate(0px, 150px);
}
#text{
position: absolute;
display: grid;
color: whitesmoke;
transform: translate(0px, 150px);
z-index: 2;
font-size: 50px;
}
.policies{
margin-top: 0px;
background-image: whitesmoke;
display: flex;
position: relative;
}
#prod{
background-image: url("https://images.unsplash.com/photo-1524230572899-a752b3835840?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1952&q=80");
margin-right: -7px;
margin-left: -7px;
position: absolute;
top: 390px;
font-size: large;
}
/* .centered{
position: absolute;
color: rgb(228, 56, 56);
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
} */
<!DOCTYPE html>
<html>
<body>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap"
type='text/css'>
</head>
<div class="top-container">
<img class="logo" src="logo1.svg" alt="a logo">
<div id="title">
<h1>Giovanni's Guitars</h1>
</div>
</div>
<header id="header">
<img id="header-img" src="logo2.svg" alt="a logo">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<div class="container">
<video autoplay muted loop id="cover">
<source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
</video>
<p id="sml">Since 1961</p>
<div id="text">
<h4>Guitars and Basses.</h4>
</div>
</div>
<section class="policies">
<h5 id="prod">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel sint fugiat placeat mollitia necessitatibus enim quae at illo rem! Fuga tempore dicta ut repudiandae quis quaerat facere sit odit! Fugiat perspiciatis, accusamus voluptate itaque incidunt reprehenderit perferendis nemo. Consequuntur vero ipsum modi excepturi facilis id nemo, porro animi beatae est recusandae officia, repudiandae velit necessitatibus possimus nam maiores quo corporis laboriosam obcaecati repellat sit! Explicabo eveniet fugiat iste, minima facere ipsum aliquam fuga dignissimos amet aperiam atque excepturi, adipisci distinctio minus laudantium. Provident obcaecati tenetur rerum! Eveniet quo, nulla debitis, reiciendis hic fugiat perferendis vel consequatur eligendi amet assumenda totam? Ullam ipsa illum fugit, dolor est hic ex sequi laudantium odio consectetur vitae nihil unde, quibusdam necessitatibus. Quae placeat dolorum eos suscipit! Quo necessitatibus in ab delectus doloremque et ipsum dolorem, quod, accusantium voluptas, obcaecati possimus. Dolores dolor accusamus ex aspernatur! Porro quo laboriosam est blanditiis incidunt, quis accusantium necessitatibus distinctio dolorem enim ipsam accusamus ut odit officia rerum, praesentium ab voluptas fuga explicabo fugit dolorum ea cum animi in? Iusto veniam corporis doloremque, necessitatibus ipsam dolore! Quam sequi reprehenderit ex fugiat soluta facilis illum laudantium omnis assumenda quisquam, incidunt, deserunt officia nostrum perspiciatis. Labore veniam reiciendis quia eos veritatis sequi velit numquam unde molestias, adipisci, eligendi quisquam, quae quo modi porro harum commodi consequatur aliquid nobis. Natus quidem voluptate ratione fugiat, dolores quo culpa fuga fugit. Aperiam dolore, velit ullam repellat unde delectus eos aliquid, asperiores itaque impedit in sapiente, quasi facilis. Libero iusto cumque esse rerum quis, suscipit voluptatibus nihil soluta facere magni, nesciunt praesentium dolore consectetur et sapiente corrupti reprehenderit fuga facilis animi odio asperiores quod tempore? Possimus numquam mollitia nemo amet quod ut facere maxime facilis cupiditate optio, cum quisquam culpa accusantium harum dicta iste autem. Illo provident minima dolorum excepturi culpa perferendis laboriosam, fugiat reprehenderit magnam adipisci. Minus cumque magni harum! Minus earum aliquam porro explicabo fugiat fuga ipsa aut hic autem rerum ad provident corrupti, repellendus quam assumenda repudiandae? Quos inventore nam aliquam fugit totam modi fugiat asperiores cumque cum reprehenderit. Laborum iusto culpa facere velit inventore aperiam quia nisi, amet dolorem autem possimus explicabo enim vel dolore. Aut iusto amet consequatur saepe velit aliquam nihil nisi, quo iure veniam doloribus ducimus! Adipisci quisquam alias nisi eveniet! Repudiandae officia perspiciatis, neque accusantium cum suscipit fuga alias explicabo, corporis facere voluptatem assumenda fugiat incidunt dignissimos dicta ex tenetur magni sint ipsam ipsum. Provident suscipit quod asperiores labore esse sapiente nesciunt, iusto blanditiis aut distinctio sint rerum optio. Distinctio aspernatur eum natus assumenda! Molestias omnis fuga natus vitae eius ea, eligendi odit magni laboriosam id quis reprehenderit aspernatur expedita sunt. Ex praesentium facilis at, hic minus voluptatem laborum eaque, voluptatum ipsa incidunt tempora. Tempora vel dignissimos aspernatur rerum optio officia excepturi delectus, commodi ex itaque ab velit eaque pariatur sapiente placeat reprehenderit earum ipsum necessitatibus ullam! Hic maxime assumenda provident praesentium animi corrupti laboriosam dolores explicabo voluptas iure, quasi error dolore doloremque voluptatem molestias et accusamus officia id reprehenderit repellat quia ipsam, quo repudiandae. At, repudiandae aut! Itaque rerum natus nulla aperiam veniam et fugit ipsa, at reiciendis eos consectetur unde officia, impedit earum facere placeat nemo praesentium quos deserunt temporibus, nesciunt doloribus culpa ad? Eius repellat vel fugit, labore reprehenderit nesciunt tenetur maxime debitis tempore veniam, non et quibusdam deleniti laborum explicabo! Architecto quo perferendis doloribus ut magnam inventore alias temporibus voluptatem qui ratione neque itaque ex est atque, debitis quod voluptates error dolorum sapiente excepturi magni. Quis modi molestiae laborum magni odio maxime laudantium id sed labore enim facere est veritatis distinctio, quos asperiores minus delectus ratione earum ipsum a quo? Atque aliquid molestiae repellat veritatis corporis optio voluptas, sunt impedit eum nobis laboriosam expedita magni sed doloribus consectetur, quos ratione maxime saepe! Sapiente ea eligendi libero alias laborum voluptatem repellat consequuntur mollitia perspiciatis non dolorum, quas et repellendus. Repellat, doloribus alias quas rerum eveniet quo velit ullam dolorem quidem nesciunt ipsum cum exercitationem magni numquam provident neque nemo odio perferendis, sapiente ipsam sunt.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, minima. Dolore quod quam similique, odio facere necessitatibus quas officia libero non eveniet sit ipsum consectetur sunt distinctio omnis dolor, doloremque quaerat, labore quia fugiat porro facilis inventore! Nulla magnam labore assumenda laboriosam incidunt nisi dignissimos maxime repudiandae, maiores ipsa quod eligendi, at nesciunt quos. Commodi vitae blanditiis ratione assumenda. Voluptatem placeat provident illum officia fugit sequi vero nisi quam. Ipsum rerum eius ratione ea asperiores possimus praesentium commodi fuga, minima eum laudantium suscipit nostrum eveniet perferendis deserunt laboriosam blanditiis neque, alias, voluptatem eligendi dolorum vitae quae! Aut amet aliquid libero pariatur, blanditiis harum atque. Necessitatibus, iure? Odio quae magnam aliquid incidunt officia error perspiciatis illum voluptatum hic? Quas alias nemo accusantium temporibus error? Provident fuga fugiat eius enim totam soluta saepe beatae accusantium asperiores sunt nesciunt ipsa, eaque dolorum et perspiciatis dignissimos sequi? Adipisci dolorem doloremque facere pariatur inventore fuga cupiditate vel quidem enim a quia, ab odio, eveniet dignissimos dolores aliquid tenetur autem, quis nam quibusdam. Vel, quam excepturi. Fugit maxime voluptatum nam maiores delectus, quo illo consequatur aliquid dolorem excepturi quia sit laudantium quam deserunt numquam adipisci voluptatem eveniet voluptates, sed veniam rem reprehenderit corporis? Blanditiis quod, aut consequuntur commodi nisi, cupiditate dolor nihil aperiam deserunt quaerat molestiae quis nesciunt, laborum unde incidunt culpa! Possimus commodi impedit ullam eius aut veritatis expedita voluptatum nam deserunt ipsa, eum consequatur iusto doloribus enim voluptas labore ut nobis obcaecati illo perspiciatis quam similique provident. Culpa, quos sint eveniet eaque sequi doloremque mollitia nesciunt alias maiores debitis natus soluta. Explicabo dolorum ipsum dolores quaerat doloribus ad commodi nulla cupiditate doloremque. Quas iusto velit pariatur voluptatibus labore? Assumenda, cumque! Dicta molestias, harum officiis aperiam velit temporibus optio obcaecati nemo sint quam debitis nostrum. Esse, dolor. Excepturi provident ea ab, quas fugiat, dolores magni sapiente ipsum, accusantium commodi ex itaque enim! Beatae odio ipsa quisquam enim eius expedita obcaecati doloribus libero illum minima dolor asperiores accusantium, saepe suscipit facilis consequatur laboriosam, optio nemo cupiditate commodi necessitatibus aperiam. Enim perferendis ullam cum beatae soluta quas aspernatur labore itaque veniam delectus dolor debitis, voluptatibus veritatis deserunt nihil blanditiis velit ex obcaecati necessitatibus officiis minima omnis odit. Explicabo est consequuntur, ea nemo asperiores placeat nisi cum fugiat reiciendis repudiandae unde ipsum, distinctio nesciunt eos eligendi. Quo provident atque aperiam nemo numquam quaerat aliquid! Quibusdam culpa obcaecati quaerat excepturi veniam! Ut aliquam dolorum vitae praesentium reprehenderit? Unde hic consequatur officia, amet doloremque expedita! Voluptas accusamus animi ipsum quisquam atque et, ducimus est sequi quos quibusdam, nulla omnis, magnam debitis molestiae sit eius soluta impedit iusto esse voluptatem minus fugiat dolor provident? Adipisci ipsam eos, id ad accusamus voluptates accusantium maiores quas quos nobis, optio culpa assumenda similique voluptatum rem dolorum veniam doloremque ducimus quasi sit. Quos blanditiis natus in nisi sint illo unde inventore repudiandae, beatae eius ut vero ex at veritatis dolor itaque obcaecati adipisci. Itaque beatae omnis tempora et eos debitis, amet incidunt consequuntur aut aliquid, porro distinctio expedita repellat tempore. Similique iste dolores excepturi esse laborum ad, asperiores voluptate. Cum harum aliquid alias qui perferendis magnam maiores eligendi expedita et sapiente quibusdam animi unde minus, mollitia nihil repellat delectus cupiditate, architecto eveniet! Modi iusto vero molestiae laudantium, corporis optio a vel perspiciatis quisquam alias maiores ratione, ea ipsam id quam dolorem quis consequuntur. Excepturi at explicabo doloremque asperiores cupiditate? Cum sunt dolorem similique eveniet eligendi, obcaecati nesciunt vel perspiciatis delectus magnam, illum doloribus aut amet ipsam veritatis laboriosam quidem alias illo saepe rerum! Et dicta quo tempore eos dolore? Iste hic recusandae, blanditiis cumque veniam quas architecto. Repudiandae aliquam necessitatibus magni rerum quisquam eum atque dolorum placeat dignissimos. A qui cumque voluptates sint optio voluptatibus vitae harum tenetur reiciendis id eos quidem tempore laborum in error obcaecati odit ex et ratione, eaque assumenda aut eius! Impedit, quis. Nulla inventore neque omnis qui eveniet molestias eius sint vel voluptas! Tempora, animi? Sequi veniam iure quibusdam repellat, dolorum, id earum accusamus reiciendis at possimus adipisci a similique?</h5>
</section>
</body>
</html>
Reference: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
Working Demo: https://codepen.io/shalinimandal/pen/dyWEgpg
Add the following CSS in your code:
nav {
z-index: 10;
}
.sticky {
position: fixed;
top: 50px;
width: 100%;
}
Add this Javascript code to add sticky class on scroll
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("nav-bar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
You can try to remove position: fixed from #cover and position: absolute from #prod
#title{
font-family: 'Inknut Antiqua', sans-serif;
color: rgb(243, 30, 112);
font-size: 12px;
position: relative;
top: 24px;
display: flex;
flex-direction: row;
}
.logo{
width: 4%;
position: relative;
top: 20px;
display: flex;
flex-direction: row;
}
.top-container {
padding: 60px 30px 30px 30px;
margin: -80px -6px 0px -30px;
background-color: #f1f1f1;
display: flex;
justify-content: center;
position: relative;
background-image: linear-gradient(-45deg,blue,white,yellow);
}
body{
box-sizing: border-box;
}
body, header, .container {
display:initial;
}
#header-img{
width: 3%;
padding: 0;
display: flex;
position: relative;
top: 2px;
}
nav {
position: sticky;
top: 0;
position: -webkit-sticky;
z-index: 10;
}
ul {
list-style-type: none;
margin: 0;
padding: 20%;
background-color: #333;
width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
}
li {
list-style: none;
margin-right: 70px;
font-size: 25px;
font-weight: bold;
}
li a {
display: block;
color: white;
text-align: center;
padding: 3px 10px;
text-decoration: none;
}
li a:hover {
background-color: #04AA6D;
border-radius: 5px;
}
ul {
list-style-type: none;
margin: -48px -6px 0px -10px;
padding: 9px;
display: flex;
flex-direction: row;
}
#cover{
margin: 0.5px -10px 0px -10px;
/*position: fixed;*/
top: 0px;
display: grid;
width: 100%;
margin-right: -98px;
height: 550px;
object-fit: cover;
align-self: center;
z-index: -1;
opacity: 0.8;
}
.container {
height: 100%;
padding: 0.01em 16px;
padding-top: 0.01em;
padding-right: 0px;
padding-bottom: 0.01em;
padding-left: 0px;
display: grid;
position: relative;
justify-items: center;
}
#sml{
position: absolute;
display: grid;
color: white;
transform: translate(0px, 150px);
}
#text{
position: absolute;
display: grid;
color: whitesmoke;
transform: translate(0px, 150px);
z-index: 2;
font-size: 50px;
}
.policies{
margin-top: 0px;
background-image: whitesmoke;
display: flex;
position: relative;
}
#prod{
background-image: url("https://images.unsplash.com/photo-1524230572899-a752b3835840?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1952&q=80");
margin-right: -7px;
margin-left: -7px;
/*position: absolute;*/
top: 390px;
font-size: large;
}
/* .centered{
position: absolute;
color: rgb(228, 56, 56);
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
} */
<body>
<div class="top-container">
<img class="logo" src="logo1.svg" alt="a logo">
<div id="title">
<h1>Giovanni's Guitars</h1>
</div>
</div>
<header id="header">
<img id="header-img" src="logo2.svg" alt="a logo">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<div class="container">
<video autoplay muted loop id="cover">
<source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
</video>
<p id="sml">Since 1961</p>
<div id="text">
<h4>Guitars and Basses.</h4>
</div>
</div>
<section class="policies">
<h5 id="prod">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel sint fugiat placeat mollitia necessitatibus enim quae at illo rem! Fuga tempore dicta ut repudiandae quis quaerat facere sit odit! Fugiat perspiciatis, accusamus voluptate itaque incidunt reprehenderit perferendis nemo. Consequuntur vero ipsum modi excepturi facilis id nemo, porro animi beatae est recusandae officia, repudiandae velit necessitatibus possimus nam maiores quo corporis laboriosam obcaecati repellat sit! Explicabo eveniet fugiat iste, minima facere ipsum aliquam fuga dignissimos amet aperiam atque excepturi, adipisci distinctio minus laudantium. Provident obcaecati tenetur rerum! Eveniet quo, nulla debitis, reiciendis hic fugiat perferendis vel consequatur eligendi amet assumenda totam? Ullam ipsa illum fugit, dolor est hic ex sequi laudantium odio consectetur vitae nihil unde, quibusdam necessitatibus. Quae placeat dolorum eos suscipit! Quo necessitatibus in ab delectus doloremque et ipsum dolorem, quod, accusantium voluptas, obcaecati possimus. Dolores dolor accusamus ex aspernatur! Porro quo laboriosam est blanditiis incidunt, quis accusantium necessitatibus distinctio dolorem enim ipsam accusamus ut odit officia rerum, praesentium ab voluptas fuga explicabo fugit dolorum ea cum animi in? Iusto veniam corporis doloremque, necessitatibus ipsam dolore! Quam sequi reprehenderit ex fugiat soluta facilis illum laudantium omnis assumenda quisquam, incidunt, deserunt officia nostrum perspiciatis. Labore veniam reiciendis quia eos veritatis sequi velit numquam unde molestias, adipisci, eligendi quisquam, quae quo modi porro harum commodi consequatur aliquid nobis. Natus quidem voluptate ratione fugiat, dolores quo culpa fuga fugit. Aperiam dolore, velit ullam repellat unde delectus eos aliquid, asperiores itaque impedit in sapiente, quasi facilis. Libero iusto cumque esse rerum quis, suscipit voluptatibus nihil soluta facere magni, nesciunt praesentium dolore consectetur et sapiente corrupti reprehenderit fuga facilis animi odio
</h5>
</section>
</body>
I think position: sticky doesn't work the way you think it does. The element with the position: sticky will only be "stuck" as long as its parent is visible. In your case nav parent is header and header has roughly the same height than nav.
In other words if you want an element to stick it needs to be the child of the element you're scrolling into.
The problem in your case is that so many elements are positioned with absolute or fixed at the end your body has the same height as the header wich means no overflow and no "stickiness"
My advise would be to start over if possible, avoid position: absolute or position: fixed for the layout (I usually recommend display: grid but when I see the final result display: block should do) and apply position: sticky to the header
As I said in comment of your question:
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. Source Mozilla
It does solve entirely your problem:
First I took out the nav from the header to make the position:sticky work because it wont work if it is not directly under body in this case.
Second I just commented your position:fixed on your #cover to show where that it can work otherwise it will always cancel your sticky as per documentation
Third I added z-index:1000; /* ADDED */ on your nav
Fourth comment postion on .policies and #prod
Now you just need to align correctly your video, as it seems to have a lot of different margin for no reason
DEMO:
#title{
font-family: 'Inknut Antiqua', sans-serif;
color: rgb(243, 30, 112);
font-size: 12px;
position: relative;
top: 24px;
display: flex;
flex-direction: row;
}
.logo{
width: 4%;
position: relative;
top: 20px;
display: flex;
flex-direction: row;
}
.top-container {
padding: 60px 30px 30px 30px;
margin: -80px -6px 0px -30px;
background-color: #f1f1f1;
display: flex;
justify-content: center;
position: relative;
background-image: linear-gradient(-45deg,blue,white,yellow);
}
body{
box-sizing: border-box;
}
#header-img{
width: 3%;
padding: 0;
display: flex;
position: relative;
top: 2px;
}
nav {
position: sticky;
top: 0;
z-index:1000; /* ADDED */
}
ul {
list-style-type: none;
margin: 0;
padding: 20%;
background-color: #333;
width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
}
li {
list-style: none;
margin-right: 70px;
font-size: 25px;
font-weight: bold;
}
li a {
display: block;
color: white;
text-align: center;
padding: 3px 10px;
text-decoration: none;
}
li a:hover {
background-color: #04AA6D;
border-radius: 5px;
}
ul {
list-style-type: none;
margin: -48px -6px 0px -10px;
padding: 9px;
display: flex;
flex-direction: row;
}
#cover{
margin: 0.5px -10px 0px -10px;
/*position: fixed;*/
top: 0px;
display: grid;
width: 100%;
margin-right: -98px;
height: 550px;
object-fit: cover;
align-self: center;
z-index: -1;
opacity: 0.8;
}
.container {
height: 100%;
padding: 0.01em 16px;
padding-top: 0.01em;
padding-right: 0px;
padding-bottom: 0.01em;
padding-left: 0px;
display: grid;
position: relative;
justify-items: center;
}
#sml{
position: absolute;
display: grid;
color: white;
transform: translate(0px, 150px);
}
#text{
position: absolute;
display: grid;
color: whitesmoke;
transform: translate(0px, 150px);
z-index: 2;
font-size: 50px;
}
.policies{
margin-top: 0px;
background-image: whitesmoke;
display: flex;
/*position: relative;*/
}
#prod{
background-image: url("https://images.unsplash.com/photo-1524230572899-a752b3835840?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1952&q=80");
margin-right: -7px;
margin-left: -7px;
/*position: absolute;*/
top: 390px;
font-size: large;
}
/* .centered{
position: absolute;
color: rgb(228, 56, 56);
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
} */
<!DOCTYPE html>
<html>
<body>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap"
type='text/css'>
</head>
<div class="top-container">
<img class="logo" src="logo1.svg" alt="a logo">
<div id="title">
<h1>Giovanni's Guitars</h1>
</div>
</div>
<header id="header">
<img id="header-img" src="logo2.svg" alt="a logo">
</header>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
<div class="container">
<video autoplay muted loop id="cover">
<source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
</video>
<p id="sml">Since 1961</p>
<div id="text">
<h4>Guitars and Basses.</h4>
</div>
</div>
<section class="policies">
<h5 id="prod">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel sint fugiat placeat mollitia necessitatibus enim quae at illo rem! Fuga tempore dicta ut repudiandae quis quaerat facere sit odit! Fugiat perspiciatis, accusamus voluptate itaque incidunt reprehenderit perferendis nemo. Consequuntur vero ipsum modi excepturi facilis id nemo, porro animi beatae est recusandae officia, repudiandae velit necessitatibus possimus nam maiores quo corporis laboriosam obcaecati repellat sit! Explicabo eveniet fugiat iste, minima facere ipsum aliquam fuga dignissimos amet aperiam atque excepturi, adipisci distinctio minus laudantium. Provident obcaecati tenetur rerum! Eveniet quo, nulla debitis, reiciendis hic fugiat perferendis vel consequatur eligendi amet assumenda totam? Ullam ipsa illum fugit, dolor est hic ex sequi laudantium odio consectetur vitae nihil unde, quibusdam necessitatibus. Quae placeat dolorum eos suscipit! Quo necessitatibus in ab delectus doloremque et ipsum dolorem, quod, accusantium voluptas, obcaecati possimus. Dolores dolor accusamus ex aspernatur! Porro quo laboriosam est blanditiis incidunt, quis accusantium necessitatibus distinctio dolorem enim ipsam accusamus ut odit officia rerum, praesentium ab voluptas fuga explicabo fugit dolorum ea cum animi in? Iusto veniam corporis doloremque, necessitatibus ipsam dolore! Quam sequi reprehenderit ex fugiat soluta facilis illum laudantium omnis assumenda quisquam, incidunt, deserunt officia nostrum perspiciatis. Labore veniam reiciendis quia eos veritatis sequi velit numquam unde molestias, adipisci, eligendi quisquam, quae quo modi porro harum commodi consequatur aliquid nobis. Natus quidem voluptate ratione fugiat, dolores quo culpa fuga fugit. Aperiam dolore, velit ullam repellat unde delectus eos aliquid, asperiores itaque impedit in sapiente, quasi facilis. Libero iusto cumque esse rerum quis, suscipit voluptatibus nihil soluta facere magni, nesciunt praesentium dolore consectetur et sapiente corrupti reprehenderit fuga facilis animi odio asperiores quod tempore? Possimus numquam mollitia nemo amet quod ut facere maxime facilis cupiditate optio, cum quisquam culpa accusantium harum dicta iste autem. Illo provident minima dolorum excepturi culpa perferendis laboriosam, fugiat reprehenderit magnam adipisci. Minus cumque magni harum! Minus earum aliquam porro explicabo fugiat fuga ipsa aut hic autem rerum ad provident corrupti, repellendus quam assumenda repudiandae? Quos inventore nam aliquam fugit totam modi fugiat asperiores cumque cum reprehenderit. Laborum iusto culpa facere velit inventore aperiam quia nisi, amet dolorem autem possimus explicabo enim vel dolore. Aut iusto amet consequatur saepe velit aliquam nihil nisi, quo iure veniam doloribus ducimus! Adipisci quisquam alias nisi eveniet! Repudiandae officia perspiciatis, neque accusantium cum suscipit fuga alias explicabo, corporis facere voluptatem assumenda fugiat incidunt dignissimos dicta ex tenetur magni sint ipsam ipsum. Provident suscipit quod asperiores labore esse sapiente nesciunt, iusto blanditiis aut distinctio sint rerum optio. Distinctio aspernatur eum natus assumenda! Molestias omnis fuga natus vitae eius ea, eligendi odit magni laboriosam id quis reprehenderit aspernatur expedita sunt. Ex praesentium facilis at, hic minus voluptatem laborum eaque, voluptatum ipsa incidunt tempora. Tempora vel dignissimos aspernatur rerum optio officia excepturi delectus, commodi ex itaque ab velit eaque pariatur sapiente placeat reprehenderit earum ipsum necessitatibus ullam! Hic maxime assumenda provident praesentium animi corrupti laboriosam dolores explicabo voluptas iure, quasi error dolore doloremque voluptatem molestias et accusamus officia id reprehenderit repellat quia ipsam, quo repudiandae. At, repudiandae aut! Itaque rerum natus nulla aperiam veniam et fugit ipsa, at reiciendis eos consectetur unde officia, impedit earum facere placeat nemo praesentium quos deserunt temporibus, nesciunt doloribus culpa ad? Eius repellat vel fugit, labore reprehenderit nesciunt tenetur maxime debitis tempore veniam, non et quibusdam deleniti laborum explicabo! Architecto quo perferendis doloribus ut magnam inventore alias temporibus voluptatem qui ratione neque itaque ex est atque, debitis quod voluptates error dolorum sapiente excepturi magni. Quis modi molestiae laborum magni odio maxime laudantium id sed labore enim facere est veritatis distinctio, quos asperiores minus delectus ratione earum ipsum a quo? Atque aliquid molestiae repellat veritatis corporis optio voluptas, sunt impedit eum nobis laboriosam expedita magni sed doloribus consectetur, quos ratione maxime saepe! Sapiente ea eligendi libero alias laborum voluptatem repellat consequuntur mollitia perspiciatis non dolorum, quas et repellendus. Repellat, doloribus alias quas rerum eveniet quo velit ullam dolorem quidem nesciunt ipsum cum exercitationem magni numquam provident neque nemo odio perferendis, sapiente ipsam sunt.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, minima. Dolore quod quam similique, odio facere necessitatibus quas officia libero non eveniet sit ipsum consectetur sunt distinctio omnis dolor, doloremque quaerat, labore quia fugiat porro facilis inventore! Nulla magnam labore assumenda laboriosam incidunt nisi dignissimos maxime repudiandae, maiores ipsa quod eligendi, at nesciunt quos. Commodi vitae blanditiis ratione assumenda. Voluptatem placeat provident illum officia fugit sequi vero nisi quam. Ipsum rerum eius ratione ea asperiores possimus praesentium commodi fuga, minima eum laudantium suscipit nostrum eveniet perferendis deserunt laboriosam blanditiis neque, alias, voluptatem eligendi dolorum vitae quae! Aut amet aliquid libero pariatur, blanditiis harum atque. Necessitatibus, iure? Odio quae magnam aliquid incidunt officia error perspiciatis illum voluptatum hic? Quas alias nemo accusantium temporibus error? Provident fuga fugiat eius enim totam soluta saepe beatae accusantium asperiores sunt nesciunt ipsa, eaque dolorum et perspiciatis dignissimos sequi? Adipisci dolorem doloremque facere pariatur inventore fuga cupiditate vel quidem enim a quia, ab odio, eveniet dignissimos dolores aliquid tenetur autem, quis nam quibusdam. Vel, quam excepturi. Fugit maxime voluptatum nam maiores delectus, quo illo consequatur aliquid dolorem excepturi quia sit laudantium quam deserunt numquam adipisci voluptatem eveniet voluptates, sed veniam rem reprehenderit corporis? Blanditiis quod, aut consequuntur commodi nisi, cupiditate dolor nihil aperiam deserunt quaerat molestiae quis nesciunt, laborum unde incidunt culpa! Possimus commodi impedit ullam eius aut veritatis expedita voluptatum nam deserunt ipsa, eum consequatur iusto doloribus enim voluptas labore ut nobis obcaecati illo perspiciatis quam similique provident. Culpa, quos sint eveniet eaque sequi doloremque mollitia nesciunt alias maiores debitis natus soluta. Explicabo dolorum ipsum dolores quaerat doloribus ad commodi nulla cupiditate doloremque. Quas iusto velit pariatur voluptatibus labore? Assumenda, cumque! Dicta molestias, harum officiis aperiam velit temporibus optio obcaecati nemo sint quam debitis nostrum. Esse, dolor. Excepturi provident ea ab, quas fugiat, dolores magni sapiente ipsum, accusantium commodi ex itaque enim! Beatae odio ipsa quisquam enim eius expedita obcaecati doloribus libero illum minima dolor asperiores accusantium, saepe suscipit facilis consequatur laboriosam, optio nemo cupiditate commodi necessitatibus aperiam. Enim perferendis ullam cum beatae soluta quas aspernatur labore itaque veniam delectus dolor debitis, voluptatibus veritatis deserunt nihil blanditiis velit ex obcaecati necessitatibus officiis minima omnis odit. Explicabo est consequuntur, ea nemo asperiores placeat nisi cum fugiat reiciendis repudiandae unde ipsum, distinctio nesciunt eos eligendi. Quo provident atque aperiam nemo numquam quaerat aliquid! Quibusdam culpa obcaecati quaerat excepturi veniam! Ut aliquam dolorum vitae praesentium reprehenderit? Unde hic consequatur officia, amet doloremque expedita! Voluptas accusamus animi ipsum quisquam atque et, ducimus est sequi quos quibusdam, nulla omnis, magnam debitis molestiae sit eius soluta impedit iusto esse voluptatem minus fugiat dolor provident? Adipisci ipsam eos, id ad accusamus voluptates accusantium maiores quas quos nobis, optio culpa assumenda similique voluptatum rem dolorum veniam doloremque ducimus quasi sit. Quos blanditiis natus in nisi sint illo unde inventore repudiandae, beatae eius ut vero ex at veritatis dolor itaque obcaecati adipisci. Itaque beatae omnis tempora et eos debitis, amet incidunt consequuntur aut aliquid, porro distinctio expedita repellat tempore. Similique iste dolores excepturi esse laborum ad, asperiores voluptate. Cum harum aliquid alias qui perferendis magnam maiores eligendi expedita et sapiente quibusdam animi unde minus, mollitia nihil repellat delectus cupiditate, architecto eveniet! Modi iusto vero molestiae laudantium, corporis optio a vel perspiciatis quisquam alias maiores ratione, ea ipsam id quam dolorem quis consequuntur. Excepturi at explicabo doloremque asperiores cupiditate? Cum sunt dolorem similique eveniet eligendi, obcaecati nesciunt vel perspiciatis delectus magnam, illum doloribus aut amet ipsam veritatis laboriosam quidem alias illo saepe rerum! Et dicta quo tempore eos dolore? Iste hic recusandae, blanditiis cumque veniam quas architecto. Repudiandae aliquam necessitatibus magni rerum quisquam eum atque dolorum placeat dignissimos. A qui cumque voluptates sint optio voluptatibus vitae harum tenetur reiciendis id eos quidem tempore laborum in error obcaecati odit ex et ratione, eaque assumenda aut eius! Impedit, quis. Nulla inventore neque omnis qui eveniet molestias eius sint vel voluptas! Tempora, animi? Sequi veniam iure quibusdam repellat, dolorum, id earum accusamus reiciendis at possimus adipisci a similique?</h5>
</section>
</body>
</html>
I tested a bit and I think the problem is not with the position sticky but with where your nav is located in the html.
if you move it outside the header you will see that it already sticks a little. The problem is that it can only stick to the top of its container as long as it doesn't touch the bottom of the container. So the height of the container should be bigger for you nav to be able to move.
Could you add some more detail on how you want the desired design to behave.
Do you wish to have the navbar stop when it hits to the top of the page? If so you will likely require some JavaScript. In which case, this may be what you are looking for...
https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
If you simply wish for the navbar to stay where it is whilst the rest of the page moves behind it, then try this...
nav {
position: fixed;
}
I am trying to make a modal from scratch without using bootstrap or similar libraries. Here is my css:
.modal-background {
position: fixed;
z-index: 2147483645;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.2);
}
.modal-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.modal-container .card {
z-index: 2147483646;
}
<div class="modal-background"></div>
<div class="modal-container">
<div class="card shadow">
<div class="card-body">
content goes here
</div>
</div>
</div>
The modal works perfectly when it is being overlayed on a web page which doesn't extend past 100% of the viewport. In other words if the page is short enough to not require scrolling then the modal displays in the center of the screen correctly.
What I am trying to figure out is how to always have the modal displayed in the center of the screen even when overlayed on a page that is long, ie: the user has scrolled down to the bottom of a page and then the modal is displayed.
Currently if the user has already scrolled to the bottom of a long page and then I display the modal, it is displayed at the top of the page out of sight from the user. How do I display it in the center of the screen so the user sees it no matter how long the page is?
ps. I am using Vue.js to show/hide the modal. So all I'm asking about is the presentation/layout of the modal.
Create a modal-wrapper and position it relative and make it fixed.
I've used lorem ipsum for demo purposes.
.modal-wrapper {
position: relative;
position: fixed;
z-index: 2147483645;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.modal-background {
position: fixed;
z-index: 2147483645;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.2);
}
.modal-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.modal-container .card {
z-index: 2147483646;
}
.card-body{
background: red;
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam in vero voluptatem asperiores odio dolores! Libero voluptatem, maxime optio neque voluptate consectetur? Natus reprehenderit nemo repellat autem debitis iure aperiam? Repudiandae itaque
aliquam assumenda ab odio fuga. Voluptatem saepe incidunt ut, nihil libero aperiam. Facere aut ut laborum similique, sapiente veniam consequatur ab nostrum labore facilis, dolore ipsa debitis dignissimos. Natus dicta repellat totam laborum sit perspiciatis
culpa cupiditate, quis, amet modi, sequi architecto reiciendis. Eos inventore incidunt dolorem suscipit magni corrupti ad, sunt similique facere consequatur nesciunt accusantium deleniti! Aspernatur asperiores omnis sint vero, id natus maiores iusto facilis
itaque eaque inventore veritatis consectetur ut recusandae voluptatibus quasi ipsam voluptatem incidunt odit! Nesciunt qui corrupti iure asperiores. Autem, cum! Distinctio hic optio id obcaecati dignissimos. Dicta, consectetur at! Voluptatibus mollitia
est, in voluptatum laudantium cumque libero qui totam cupiditate! Ullam quaerat nemo culpa? Aspernatur id officia nihil omnis eligendi. Blanditiis incidunt non dolorem officia sint maiores excepturi exercitationem laudantium accusamus voluptate praesentium
inventore molestiae, quam corporis doloribus? Animi exercitationem ab quod consectetur repellendus quas et maiores voluptate eligendi eveniet? Velit libero molestias iusto tempore nesciunt tenetur quod amet quibusdam, nostrum ex sed doloribus natus soluta
accusantium quos quis possimus, ratione nam perspiciatis rem dolorum id exercitationem sint. Rem, nam. Maxime laboriosam quidem itaque quasi facere molestias cum cumque, mollitia veniam blanditiis voluptatibus, at nisi eaque sunt. Magnam id repellendus,
in praesentium vero doloribus odit, voluptas ipsa dolore ullam magni! Quis quaerat rerum laboriosam quidem vel repellendus nobis minima iusto. Aspernatur mollitia consequuntur, sed sequi aut quis, eveniet facere eaque cumque accusantium iusto, sint tempora
fuga temporibus nisi officia saepe. Nam impedit ipsum sint qui magnam omnis recusandae consectetur fuga accusamus tempore odio, quia delectus iure explicabo harum libero, numquam corporis sunt cum eveniet ut soluta! Temporibus illum amet commodi? Quos
repudiandae culpa, iusto blanditiis possimus aperiam minima non ex voluptas debitis. Corrupti asperiores aut magnam nihil ab velit, repellat tenetur iusto facilis ipsa quod nemo soluta sequi autem! Error? Atque repellendus dolores inventore sint deserunt,
totam amet at commodi autem ex laborum velit harum temporibus. Expedita impedit repellat, minima non excepturi iusto deleniti laudantium enim libero est, sed sequi? Esse quibusdam, recusandae, molestias dignissimos reiciendis officiis ea voluptatibus
aliquam fuga voluptates illum cumque enim aliquid rerum vel sunt quia. Atque laborum fugit animi quae error. Adipisci ut illo incidunt! Esse quos ab, nemo quas corporis odit quam optio aperiam dicta, dolore libero repudiandae, consectetur ut. Quas nesciunt
dolores nemo numquam maxime minus non at vel accusantium suscipit, omnis doloribus? Aperiam necessitatibus labore rerum dolor blanditiis neque vitae in, animi iure fuga facere sequi soluta consectetur possimus molestias atque aspernatur! Corrupti aspernatur
eos vero quisquam. Beatae quas natus aliquam quaerat. Libero eveniet praesentium commodi quae voluptas, sit illo eius dolorum laboriosam perferendis sunt veniam autem quas minus vitae, omnis culpa dolores facilis, iusto repellat. Iusto in asperiores omnis
atque ea! Sapiente animi porro, exercitationem earum quod et beatae aliquid ad aliquam? Ratione necessitatibus neque perferendis, ipsum delectus adipisci. Natus facere laudantium cupiditate! Maiores voluptas eveniet, aut vel saepe cupiditate mollitia.
Similique nemo adipisci voluptates, unde, magnam a nobis tenetur doloribus accusamus quod quibusdam atque ratione. Aperiam, cum aliquid minus autem dicta, quibusdam aut in labore placeat officiis modi. Beatae, error! Blanditiis illum ut odit laudantium
tempore perferendis doloremque quod vel iste atque reprehenderit veritatis labore dolore ex, temporibus eum animi debitis velit ad minima odio repellendus quaerat. Illum, totam autem. Dolor alias magnam fugiat corrupti, dolorem praesentium iste distinctio
quibusdam eligendi quae debitis minima, consequatur blanditiis molestias impedit quisquam omnis! Voluptas dolor soluta quam beatae hic adipisci sed natus minima. Nam quam perferendis in laborum quos. Tempora, aliquam ipsam dolor sunt dolores illo magni
labore voluptate architecto veritatis et deleniti optio molestias at a nisi atque nostrum nesciunt dignissimos vitae! Ullam excepturi minima esse, et aspernatur, quam dolor debitis quidem voluptatibus officia asperiores deleniti animi, assumenda dolorem
beatae dicta! Expedita eius quidem fugiat officia voluptate illo alias dolorem, eveniet dolores? Corrupti excepturi, asperiores eveniet sunt libero omnis deleniti veniam quae magni accusantium! Dicta maxime deleniti voluptatibus possimus doloribus. Exercitationem
modi magni veritatis adipisci perspiciatis assumenda numquam velit, repudiandae deleniti nihil! Possimus, veniam rem eligendi minus voluptate voluptatem expedita similique consequuntur, illum voluptatibus fugit ipsa cum sit qui mollitia accusamus. Repudiandae
sunt sed error consequuntur sint unde assumenda, dignissimos maxime minima? Porro vel unde ab reiciendis illum corporis, repudiandae delectus, odit debitis, libero voluptates error mollitia nesciunt nobis esse quod magnam cupiditate? Dignissimos consequuntur
quisquam similique! Iusto dolorum aut ipsam dignissimos? Eaque pariatur, dolores voluptatibus, aliquam sit ratione voluptatem aspernatur eum eos, quidem animi nesciunt numquam saepe nisi corrupti asperiores esse laborum molestiae deleniti natus cumque?
Nihil accusantium odit quas! Ut. Repellat maiores possimus, suscipit sunt in omnis ipsam quaerat odit velit veniam! Quae nisi, molestias similique voluptas dignissimos dolor minima corporis nihil eaque tenetur tempore nostrum vitae voluptates, temporibus
saepe? Magni voluptas ratione obcaecati nulla architecto dolor consequuntur? Corrupti quis voluptates vitae molestiae, libero nihil voluptas labore blanditiis eaque possimus vel at cupiditate recusandae ipsam iste amet sit laborum vero. Assumenda eveniet
distinctio nemo harum. Iste neque tempore nulla vel eum. Ipsum officiis facilis nostrum quia reprehenderit vel velit eum dignissimos nulla, accusamus aperiam eius praesentium eveniet et ex saepe. Dicta aut sapiente excepturi non totam nemo quod incidunt
minus aliquid fuga eligendi illum quaerat, ut, quos, ea quis voluptate blanditiis doloremque. Officiis nam magnam repellendus minima atque ab harum! Dignissimos neque dolore harum. Illo sed ut eos expedita cupiditate sequi, rem deleniti repellat distinctio
ipsam quasi mollitia neque delectus voluptas similique, culpa quia ratione doloribus adipisci autem eligendi perspiciatis? Hic vel consequatur nulla iure, molestias pariatur doloremque! In sed porro itaque eum cupiditate illum reprehenderit nihil totam
praesentium architecto dicta assumenda, enim ea, amet ab asperiores a delectus iusto? Amet doloremque commodi provident consectetur ex voluptas molestias accusamus ea tempore quidem. Nisi ab earum cumque odio, mollitia consectetur pariatur perspiciatis
maiores officiis sunt? Obcaecati placeat distinctio soluta quod earum. Saepe est, earum suscipit vel voluptatibus aspernatur, cum veniam eveniet eos et ad sed consequatur dignissimos architecto recusandae illum unde, animi repudiandae? Esse repellat in
aspernatur dolorem tempore optio ea. Animi, maxime! Deleniti esse accusamus accusantium a ipsa, ab inventore magni, unde quaerat doloribus aspernatur beatae dolorem. Excepturi molestiae ratione iusto ullam ex aspernatur eligendi, fugiat vel, similique,
accusamus quos. Exercitationem assumenda error consequuntur dolor corporis ex maiores veniam provident labore veritatis praesentium ab enim saepe expedita quas delectus similique minus sunt odio vero ducimus esse, possimus aperiam distinctio. Doloribus.
Officiis totam ducimus laudantium itaque earum sit ipsum velit laborum dolorem dicta, praesentium, excepturi, harum ab id omnis iste eaque eum sapiente distinctio. Tempora nulla, itaque ut perspiciatis blanditiis exercitationem! Quas molestias sit officiis
veniam molestiae aliquam incidunt omnis asperiores voluptatem aliquid. Aperiam iusto repellendus ipsam, quam sunt dicta libero aspernatur et suscipit omnis, enim, nostrum quibusdam praesentium rem asperiores. Illo nobis odio ex officia possimus, quidem
nisi rerum, incidunt eveniet ad inventore ipsam alias nostrum amet eaque cupiditate ullam autem fuga a sequi architecto impedit! Hic a exercitationem quidem? Aliquid quas aliquam dignissimos optio vero, libero quia deserunt, velit maiores dolores voluptate
illo nihil? Similique sequi fugit sapiente consectetur reprehenderit impedit maiores placeat qui! Impedit quae distinctio suscipit minus! Quam, consectetur culpa perferendis, tempore commodi voluptate ab vitae porro, impedit labore fugiat? Aliquam asperiores
quaerat magni nemo, corrupti esse illo sit perferendis optio quae, expedita molestias, nam explicabo voluptatum. Error, hic. Pariatur repellendus eligendi consequuntur qui consequatur harum maiores iusto voluptate dolor numquam. Voluptas odio corporis
incidunt eveniet beatae cumque doloremque molestiae, vitae at blanditiis, expedita, sunt delectus inventore! Dolorum fugiat similique, nihil quaerat recusandae eius ut ad unde. Repellendus aut eos id a delectus commodi vero enim quidem amet nam, exercitationem
veritatis provident saepe quos autem et nemo! Quo itaque a quasi doloremque! Id, numquam necessitatibus nulla totam, nostrum consequuntur ab voluptatum dignissimos recusandae, voluptatibus laudantium unde repudiandae eius? Excepturi possimus, velit autem
pariatur consequatur consequuntur? Dolores, voluptates? Ratione aspernatur tenetur accusantium obcaecati quo exercitationem asperiores officiis architecto iste cum porro fugit incidunt repellat in molestiae eum vel tempore reiciendis harum dignissimos
voluptatum voluptates, id mollitia. Vitae, aliquid! Culpa pariatur eaque, consequatur aspernatur iure blanditiis id, cumque a maxime consequuntur minima quia repudiandae tenetur aliquid minus excepturi atque nemo facere aperiam cupiditate! Pariatur dolor
omnis commodi ratione reprehenderit. Cupiditate fuga vero accusamus ullam placeat dignissimos animi excepturi dolor est et alias repellat soluta quae totam nam sapiente accusantium, repudiandae, ipsam nobis impedit! Amet rerum esse ea libero atque! Adipisci
eos atque a dicta, sapiente nesciunt, deserunt voluptate possimus dolor placeat culpa, fugiat quasi reiciendis ut dolorem beatae! Doloribus consectetur, sit sed veniam quas eaque praesentium explicabo nihil ad! Vel quia reiciendis deleniti autem. Quidem
sit inventore, asperiores recusandae nesciunt enim, magni perspiciatis molestiae aliquid, pariatur explicabo praesentium. Voluptatum illo amet quidem tenetur, soluta consequuntur labore fugit culpa in. Itaque reprehenderit illum facere dignissimos natus
voluptates aperiam ut doloremque aliquam eos id aspernatur numquam illo necessitatibus vitae, veniam pariatur. Eum ipsam dolorem id totam nulla rem nesciunt qui iste!
<div class="modal-wrapper">
<div class="modal-background"></div>
<div class="modal-container">
<div class="card shadow">
<div class="card-body">
content goes here
</div>
</div>
</div>
</div>
One suggestion is use the grid css and a parent to contain it
.modal-background {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.modal-parent {
display: grid;
place-items: center;
}
.modal-container {
background-color: lime;
display: grid;
place-items: center;
padding: 1rem;
}
.modal-container .card {
z-index: 2;
padding: 2rem;
background-color: cyan;
}
<div class="modal-background"></div>
<div class="modal-parent">
<div class="modal-container">
<div class="card shadow">
<div class="card-body">
content goes here
</div>
</div>
</div>
</div>
I'd suggest using position: fixed which positions the element with reference to the viewport, along with the CSS logical property inset which controls the distance of each boundary from the viewport:
// irrelevant to your use-case, but shows the modal hiding and appearing:
const toggleView = (e) => {
let buttons = document.querySelectorAll('button.toggle'),
modals = document.querySelectorAll('.modal-background, .modal-container'),
currentlyOpen = !modals[0].hidden === false;
buttons.forEach(
(button) => button.classList.toggle('modalOpened', currentlyOpen)
);
modals.forEach(
(modal) => modal.hidden = !currentlyOpen
);
}
document.querySelectorAll('button.toggle').forEach(
(button) => button.addEventListener('click', toggleView)
);
.modal-background {
position: fixed;
inset: 0;
z-index: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.2);
}
.modal-container {
position: fixed;
inset: 1em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(30, 30, 30, 0.5);
}
.modal-container .card {
z-index: 100;
}
[hidden] {
display: none;
opacity: 0;
}
button.toggle {
display: block;
margin: 50vh 0 0 0;
}
button.toggle::before {
content: 'Show';
}
button.toggle.modalOpened::before {
content: 'Hide';
}
<div class="modal-background" hidden></div>
<div class="modal-container" hidden>
<div class="card shadow">
<div class="card-body">
content goes here
<button class="toggle"> the modal</button>
</div>
</div>
</div>
<!-- to illustrate that the modal can be opened, and viewed, from
anywhere in the document while still being centered on the
viewport -->
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
I have two styles for my navbar (.navbar and .navbar_fixed). And links in the navbar don't fit in it properly. I tried to remove padding and add left: 0; but it doesn't work. How can I fix that?
$(document).ready(function() {
$(window).scroll(function () {
if ($(window).scrollTop() > 280) {
$('.navbar').addClass('navbar_fixed');
$('.navbar_fixed').removeClass('navbar');
}
if ($(window).scrollTop() < 281) {
$('.navbar_fixed').addClass('navbar');
$('.navbar').removeClass('navbar_fixed');
}
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Montserrat', sans-serif;
}
.global-padding {
padding-right: 98px;
padding-left: 98px;
}
.clearfix:after {
display: table;
clear: both;
content: '';
}
.container {
width: 100%;
max-width: 1366px;
}
.navbar {
padding-top: 63px;
}
.navbar_fixed {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 32px;
padding: 23px 98px 0 98px;
background-color: #ffffff;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.25);
}
.navbar__menu {
float: right;
list-style: none;
}
.navbar__link-item {
float: left;
}
.navbar__link {
font-size: 14px;
font-weight: 300;
padding: 10px 13px;
text-decoration: none;
text-transform: uppercase;
color: #8c8c8c;
}
.navbar__link:hover {
color: #212121;
}
.navbar__link_active {
font-weight: 700;
letter-spacing: 1.4px;
color: #212121;
border-bottom: 3px solid #212121;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<nav class="global-padding navbar clearfix">
<img src="img/logo.svg" alt="Interior Logo">
<ul class="clearfix navbar__menu">
<li class="navbar__link-item">HOME</li>
<li class="navbar__link-item">PRODUCTS</li>
<li class="navbar__link-item">HISTORY</li>
<li class="navbar__link-item">SHOWROOM</li>
<li class="navbar__link-item">CONTACT</li>
<li class="navbar__link-item"><img src="{% static "img/search.svg" %}" alt="" class="navbar__search"></li>
</ul>
</nav>
<div class="container">
<p class="global-padding" style="margin-top: 20px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, ad tempore eaque autem at veritatis, modi a tenetur eius rem fugiat sunt esse! Placeat tempore quae quia eius alias! Ea officia modi cum sint pariatur architecto vero corrupti autem ex ratione asperiores commodi dolore fugiat, enim blanditiis quas accusamus sunt aperiam praesentium, accusantium excepturi? Ea, labore? Explicabo neque atque eveniet totam aperiam repellendus minima quia amet exercitationem laborum, quo tempore facilis dolores magni tenetur. Fuga nobis sit neque alias eos minima. Maiores quisquam soluta iure corrupti minima, ut enim error, ab nihil consectetur cupiditate, quod magni consequatur adipisci repudiandae architecto culpa suscipit! A minus omnis molestiae aut. Nam fugiat at, est voluptatem minus sint dolor commodi odio aperiam necessitatibus voluptatum ipsam nesciunt explicabo consequuntur nostrum hic, vitae eius blanditiis. Rem exercitationem, iure eligendi ullam accusamus, tempore impedit dignissimos perferendis quam iusto nulla molestias eos aliquam. Dolorum nisi atque nam! Iste vitae perferendis magni quos omnis impedit alias tenetur sed dolorem cupiditate totam sit nobis debitis blanditiis, cum ipsa, in earum ipsam. Asperiores atque molestiae fuga, quos tenetur repellat exercitationem magnam, voluptatibus aperiam dolore quisquam doloremque ratione perspiciatis autem in porro accusamus error accusantium iusto? Excepturi, pariatur repudiandae natus sed in totam voluptatibus laboriosam sint rerum nobis iusto quibusdam, perspiciatis alias ducimus quae dolorem eius, labore non ipsa quas. Tempore quis, beatae consequuntur explicabo asperiores eaque nisi ratione amet aliquid nesciunt atque? Enim laboriosam minima vero mollitia, quaerat porro facere laborum culpa molestiae perferendis? Quibusdam aut itaque, explicabo molestiae reprehenderit minima, et, soluta repellendus ipsam odio rem. Neque, dicta at voluptatum excepturi officiis vitae? Quidem debitis id sit amet recusandae facere rerum optio exercitationem necessitatibus cupiditate, illum magni ex reprehenderit fugiat culpa numquam maiores iste laudantium quasi ab neque! Quaerat consequuntur ipsa saepe quas perferendis consequatur neque rem pariatur corporis quia, enim eos dolorem reiciendis incidunt, ad architecto labore dignissimos adipisci sit in omnis cupiditate fuga? Blanditiis, maxime veniam quae ipsum labore ipsa quo necessitatibus, nostrum, magni omnis quidem voluptatum? Facilis vel reiciendis veniam consequatur dolorum minus! Blanditiis perferendis eveniet facilis. Assumenda corrupti libero eaque laborum labore expedita ab aperiam, neque fugiat id nesciunt dolore cupiditate reprehenderit, dignissimos distinctio ipsam. Minus sit, explicabo quae quos aliquam doloremque expedita consequuntur repellendus vel dicta? Dolorem aliquid placeat distinctio aperiam a aspernatur, ipsam quam minus doloribus, ad exercitationem quae? Ea iusto minus numquam fugiat inventore aspernatur perferendis temporibus pariatur nostrum cum eligendi, ab ratione modi similique quae rerum quasi tenetur dolor iure ut nemo molestias eveniet. Architecto soluta consequuntur optio quod, quos qui accusantium sit deserunt. Deleniti rerum explicabo sed. Voluptatibus, enim sit voluptas itaque quidem reiciendis asperiores quasi ipsum cumque consequuntur totam culpa suscipit natus repudiandae doloribus quas exercitationem veritatis sequi neque possimus qui voluptatum, nulla consectetur vel. Soluta reprehenderit perspiciatis debitis laboriosam, porro, possimus quis dolorem velit aperiam a aliquid blanditiis enim culpa dicta harum. Laborum reprehenderit enim est, eius laudantium quas ad molestias, quaerat debitis ullam quidem. Ut pariatur necessitatibus itaque at excepturi? Ratione, officiis amet repellat delectus recusandae eligendi quasi quidem esse similique quod at eum, placeat iure dignissimos magni modi debitis, nulla iusto facilis obcaecati ut. Sunt, delectus cumque aperiam exercitationem aut similique illum consectetur nostrum iusto iure aliquid impedit aspernatur dolore commodi. Asperiores saepe tempora architecto. Delectus dolorem distinctio obcaecati rerum eos eum fugiat ducimus, dignissimos, aperiam cupiditate non vel rem facere culpa eius doloribus laborum unde quod quos quae porro dolore natus. Et sed alias consectetur? Illo voluptatem possimus asperiores excepturi sed culpa dolore vitae est, esse laboriosam qui! Corporis, cupiditate ad tempore illo esse deleniti assumenda dignissimos mollitia eum odit dolores nostrum a odio maiores aperiam? Quisquam debitis perspiciatis expedita veritatis earum nemo modi eaque dolores nulla sapiente aperiam, assumenda magni quaerat iure nostrum cumque, repudiandae deleniti voluptatibus laborum! Perspiciatis quisquam aliquid nulla debitis doloremque, mollitia cumque ad totam quae suscipit, dolorum ratione perferendis consectetur magnam maxime facilis molestias quo impedit at asperiores, blanditiis et necessitatibus iure itaque. Ratione minus vero corporis mollitia velit ipsa quibusdam provident modi fugit suscipit, dolorem tempore? Recusandae ullam sit aspernatur sequi unde quas enim animi repellat perferendis rem nam praesentium, aperiam dicta eos temporibus quae! Laudantium placeat quibusdam consequuntur incidunt dolorem quia quos nulla sed aliquid accusantium quaerat consectetur obcaecati fugiat earum, laboriosam, inventore aspernatur amet at assumenda. Est dolore beatae non neque, ipsa ullam, perspiciatis laudantium ratione reiciendis vitae nobis veniam deleniti aliquam sapiente distinctio, voluptate enim praesentium fugiat libero repellat omnis ipsum. Veniam deserunt, ea in placeat distinctio facilis adipisci recusandae tempora iusto nisi excepturi sunt quae reprehenderit, tenetur enim, necessitatibus omnis et quisquam voluptate quia ipsum incidunt. Nisi sit ex mollitia aperiam nesciunt doloribus laborum rerum, dolorum deleniti asperiores ducimus maiores ea enim similique quas sunt? Sit fugit quibusdam adipisci culpa dolorum perferendis doloribus quo, placeat laboriosam expedita voluptatem totam dignissimos aspernatur aut soluta laborum! Repudiandae consequatur deleniti deserunt tempora error eveniet doloribus obcaecati, mollitia veritatis labore minima eum nihil ratione voluptate sit magni, voluptas quo exercitationem quia natus dolor. Cumque vitae ullam tempore hic fugiat esse a consequuntur libero asperiores minima cum earum repellat, ab, enim aliquam commodi saepe dolore nihil similique itaque laboriosam iure praesentium obcaecati! Eius, sed. In ipsam doloremque illum vel, sequi cupiditate, blanditiis dolores nihil aliquam veritatis facilis a impedit fugit cum, dolorum deleniti suscipit non velit laudantium ipsa maiores inventore nostrum animi? Error iusto, officiis saepe laborum nam repellat dolore aperiam ab deserunt distinctio quis amet vero, numquam obcaecati impedit quidem tempora corporis doloremque accusamus. Unde eveniet dolor quia maiores dolorem dicta. Veritatis nemo quos cum expedita doloribus, dolor recusandae soluta error, accusamus dolorum quis illo laudantium voluptatem aut repellendus optio, libero numquam eligendi enim totam distinctio. Sequi autem expedita eligendi vitae et quia dolorum adipisci. Expedita dolor tenetur, ipsa repellendus harum tempora aliquid delectus beatae quis ex cum sit sapiente hic deleniti incidunt ipsam repellat vitae. Porro distinctio, voluptatum rerum eius et corrupti fuga sapiente quia suscipit temporibus, nihil velit similique voluptatibus harum molestiae. Nemo, omnis quis facere ab nulla fuga tempore doloribus officia vitae commodi dolor, placeat voluptate beatae?
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
I added class .navbar__menu_fixed and set padding-right: 196px; (doubled default padding), also I modified my script.
$(document).ready(function() {
$(window).scroll(function () {
if ($(window).scrollTop() > 280) {
$('.navbar').addClass('navbar_fixed');
$('.navbar_fixed').removeClass('navbar');
$('.navbar__menu').addClass('navbar__menu_fixed');
$('.navbar__menu_fixed').removeClass('navbar__menu');
}
if ($(window).scrollTop() < 281) {
$('.navbar_fixed').addClass('navbar');
$('.navbar').removeClass('navbar_fixed');
$('.navbar__menu_fixed').addClass('navbar__menu');
$('.navbar__menu').removeClass('navbar__menu_fixed');
}
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Montserrat', sans-serif;
}
.global-padding {
padding-right: 98px;
padding-left: 98px;
}
.clearfix:after {
display: table;
clear: both;
content: '';
}
.container {
width: 100%;
max-width: 1366px;
}
.navbar {
padding-top: 63px;
padding-right: 98px;
padding-left: 98px;
}
.navbar_fixed {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 32px;
padding-top: 23px;
padding-left: 98px;
padding-right: 98px;
background-color: #ffffff;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.25);
}
.navbar__menu {
float: right;
list-style: none;
}
.navbar__menu_fixed {
float: right;
padding-right: 196px;
list-style: none;
}
.navbar__link-item {
float: left;
}
.navbar__link {
font-size: 14px;
font-weight: 300;
padding: 10px 13px;
text-decoration: none;
text-transform: uppercase;
color: #8c8c8c;
}
.navbar__link:hover {
color: #212121;
}
.navbar__link_active {
font-weight: 700;
letter-spacing: 1.4px;
color: #212121;
border-bottom: 3px solid #212121;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<nav class="global-padding navbar clearfix">
<img src="{% static "img/logo.svg" %}" alt="Interior Logo">
<ul class="clearfix navbar__menu">
<li class="navbar__link-item">HOME</li>
<li class="navbar__link-item">PRODUCTS</li>
<li class="navbar__link-item">HISTORY</li>
<li class="navbar__link-item">SHOWROOM</li>
<li class="navbar__link-item">CONTACT</li>
<li class="navbar__link-item"><img src="{% static "img/search.svg" %}" alt="" class="navbar__search"></li>
</ul>
</nav>
<div class="container">
<p class="global-padding" style="margin-top: 20px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, ad tempore eaque autem at veritatis, modi a tenetur eius rem fugiat sunt esse! Placeat tempore quae quia eius alias! Ea officia modi cum sint pariatur architecto vero corrupti autem ex ratione asperiores commodi dolore fugiat, enim blanditiis quas accusamus sunt aperiam praesentium, accusantium excepturi? Ea, labore? Explicabo neque atque eveniet totam aperiam repellendus minima quia amet exercitationem laborum, quo tempore facilis dolores magni tenetur. Fuga nobis sit neque alias eos minima. Maiores quisquam soluta iure corrupti minima, ut enim error, ab nihil consectetur cupiditate, quod magni consequatur adipisci repudiandae architecto culpa suscipit! A minus omnis molestiae aut. Nam fugiat at, est voluptatem minus sint dolor commodi odio aperiam necessitatibus voluptatum ipsam nesciunt explicabo consequuntur nostrum hic, vitae eius blanditiis. Rem exercitationem, iure eligendi ullam accusamus, tempore impedit dignissimos perferendis quam iusto nulla molestias eos aliquam. Dolorum nisi atque nam! Iste vitae perferendis magni quos omnis impedit alias tenetur sed dolorem cupiditate totam sit nobis debitis blanditiis, cum ipsa, in earum ipsam. Asperiores atque molestiae fuga, quos tenetur repellat exercitationem magnam, voluptatibus aperiam dolore quisquam doloremque ratione perspiciatis autem in porro accusamus error accusantium iusto? Excepturi, pariatur repudiandae natus sed in totam voluptatibus laboriosam sint rerum nobis iusto quibusdam, perspiciatis alias ducimus quae dolorem eius, labore non ipsa quas. Tempore quis, beatae consequuntur explicabo asperiores eaque nisi ratione amet aliquid nesciunt atque? Enim laboriosam minima vero mollitia, quaerat porro facere laborum culpa molestiae perferendis? Quibusdam aut itaque, explicabo molestiae reprehenderit minima, et, soluta repellendus ipsam odio rem. Neque, dicta at voluptatum excepturi officiis vitae? Quidem debitis id sit amet recusandae facere rerum optio exercitationem necessitatibus cupiditate, illum magni ex reprehenderit fugiat culpa numquam maiores iste laudantium quasi ab neque! Quaerat consequuntur ipsa saepe quas perferendis consequatur neque rem pariatur corporis quia, enim eos dolorem reiciendis incidunt, ad architecto labore dignissimos adipisci sit in omnis cupiditate fuga? Blanditiis, maxime veniam quae ipsum labore ipsa quo necessitatibus, nostrum, magni omnis quidem voluptatum? Facilis vel reiciendis veniam consequatur dolorum minus! Blanditiis perferendis eveniet facilis. Assumenda corrupti libero eaque laborum labore expedita ab aperiam, neque fugiat id nesciunt dolore cupiditate reprehenderit, dignissimos distinctio ipsam. Minus sit, explicabo quae quos aliquam doloremque expedita consequuntur repellendus vel dicta? Dolorem aliquid placeat distinctio aperiam a aspernatur, ipsam quam minus doloribus, ad exercitationem quae? Ea iusto minus numquam fugiat inventore aspernatur perferendis temporibus pariatur nostrum cum eligendi, ab ratione modi similique quae rerum quasi tenetur dolor iure ut nemo molestias eveniet. Architecto soluta consequuntur optio quod, quos qui accusantium sit deserunt. Deleniti rerum explicabo sed. Voluptatibus, enim sit voluptas itaque quidem reiciendis asperiores quasi ipsum cumque consequuntur totam culpa suscipit natus repudiandae doloribus quas exercitationem veritatis sequi neque possimus qui voluptatum, nulla consectetur vel. Soluta reprehenderit perspiciatis debitis laboriosam, porro, possimus quis dolorem velit aperiam a aliquid blanditiis enim culpa dicta harum. Laborum reprehenderit enim est, eius laudantium quas ad molestias, quaerat debitis ullam quidem. Ut pariatur necessitatibus itaque at excepturi? Ratione, officiis amet repellat delectus recusandae eligendi quasi quidem esse similique quod at eum, placeat iure dignissimos magni modi debitis, nulla iusto facilis obcaecati ut. Sunt, delectus cumque aperiam exercitationem aut similique illum consectetur nostrum iusto iure aliquid impedit aspernatur dolore commodi. Asperiores saepe tempora architecto. Delectus dolorem distinctio obcaecati rerum eos eum fugiat ducimus, dignissimos, aperiam cupiditate non vel rem facere culpa eius doloribus laborum unde quod quos quae porro dolore natus. Et sed alias consectetur? Illo voluptatem possimus asperiores excepturi sed culpa dolore vitae est, esse laboriosam qui! Corporis, cupiditate ad tempore illo esse deleniti assumenda dignissimos mollitia eum odit dolores nostrum a odio maiores aperiam? Quisquam debitis perspiciatis expedita veritatis earum nemo modi eaque dolores nulla sapiente aperiam, assumenda magni quaerat iure nostrum cumque, repudiandae deleniti voluptatibus laborum! Perspiciatis quisquam aliquid nulla debitis doloremque, mollitia cumque ad totam quae suscipit, dolorum ratione perferendis consectetur magnam maxime facilis molestias quo impedit at asperiores, blanditiis et necessitatibus iure itaque. Ratione minus vero corporis mollitia velit ipsa quibusdam provident modi fugit suscipit, dolorem tempore? Recusandae ullam sit aspernatur sequi unde quas enim animi repellat perferendis rem nam praesentium, aperiam dicta eos temporibus quae! Laudantium placeat quibusdam consequuntur incidunt dolorem quia quos nulla sed aliquid accusantium quaerat consectetur obcaecati fugiat earum, laboriosam, inventore aspernatur amet at assumenda. Est dolore beatae non neque, ipsa ullam, perspiciatis laudantium ratione reiciendis vitae nobis veniam deleniti aliquam sapiente distinctio, voluptate enim praesentium fugiat libero repellat omnis ipsum. Veniam deserunt, ea in placeat distinctio facilis adipisci recusandae tempora iusto nisi excepturi sunt quae reprehenderit, tenetur enim, necessitatibus omnis et quisquam voluptate quia ipsum incidunt. Nisi sit ex mollitia aperiam nesciunt doloribus laborum rerum, dolorum deleniti asperiores ducimus maiores ea enim similique quas sunt? Sit fugit quibusdam adipisci culpa dolorum perferendis doloribus quo, placeat laboriosam expedita voluptatem totam dignissimos aspernatur aut soluta laborum! Repudiandae consequatur deleniti deserunt tempora error eveniet doloribus obcaecati, mollitia veritatis labore minima eum nihil ratione voluptate sit magni, voluptas quo exercitationem quia natus dolor. Cumque vitae ullam tempore hic fugiat esse a consequuntur libero asperiores minima cum earum repellat, ab, enim aliquam commodi saepe dolore nihil similique itaque laboriosam iure praesentium obcaecati! Eius, sed. In ipsam doloremque illum vel, sequi cupiditate, blanditiis dolores nihil aliquam veritatis facilis a impedit fugit cum, dolorum deleniti suscipit non velit laudantium ipsa maiores inventore nostrum animi? Error iusto, officiis saepe laborum nam repellat dolore aperiam ab deserunt distinctio quis amet vero, numquam obcaecati impedit quidem tempora corporis doloremque accusamus. Unde eveniet dolor quia maiores dolorem dicta. Veritatis nemo quos cum expedita doloribus, dolor recusandae soluta error, accusamus dolorum quis illo laudantium voluptatem aut repellendus optio, libero numquam eligendi enim totam distinctio. Sequi autem expedita eligendi vitae et quia dolorum adipisci. Expedita dolor tenetur, ipsa repellendus harum tempora aliquid delectus beatae quis ex cum sit sapiente hic deleniti incidunt ipsam repellat vitae. Porro distinctio, voluptatum rerum eius et corrupti fuga sapiente quia suscipit temporibus, nihil velit similique voluptatibus harum molestiae. Nemo, omnis quis facere ab nulla fuga tempore doloribus officia vitae commodi dolor, placeat voluptate beatae?
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
Try adding margin-right to your navbar_menu
.navbar_fixed .navbar__menu {
float: right;
list-style: none;
margin-right: 10%;
}
The code of my HTML document is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wer ist Mats?</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
border: 2px white solid;
background: white;
max-width: 31.25em;
margin: 12.5em;
margin-top: 9.375em;
margin-left: 25em;
}
.header {
margin-bottom: 1.2em;
}
.text {
}
img {
position: absolute;
right: 25em;
margin-top: 9.375em;
/* Schatten von http://www.corelangs.com/css/box/image-shadow.html ausprobiert */
box-shadow: 10px 10px 5px #ccc;
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
-khtml-box-shadow: 10px 10px 5px #ccc;
}
</style>
<body>
<div class="content">
<div class="header">
<h1>Wer ist Mats?</h1>
</div>
<div class="text">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat ullam nulla officiis magnam quos repellat aliquam, nam eaque aspernatur modi possimus expedita dolores rem hic veniam quis veritatis repudiandae perspiciatis mollitia ipsam labore iusto! Corrupti qui asperiores facilis unde! Asperiores facere id ullam quod magnam animi laboriosam voluptates obcaecati modi possimus perspiciatis ad vero, esse fugit sint ab hic eligendi tenetur deleniti omnis ipsam nobis illum placeat! Sunt id quaerat impedit laborum ratione aperiam quo est quis eveniet dolor non, explicabo ab esse voluptate corporis minima omnis quae necessitatibus natus architecto distinctio. Asperiores officiis minima, quasi esse mollitia vel pariatur atque reiciendis laudantium cum, amet non delectus nemo suscipit error?<br><br> Laudantium incidunt voluptate sequi consequuntur cum magni sapiente maiores eos iure provident totam iste vel similique excepturi ipsam ipsum nobis unde deleniti nisi ullam, vero, quam quos. Labore tenetur consectetur commodi eius neque deleniti fugit quae ad iusto, eveniet aliquam quam itaque dignissimos, iure sit facilis voluptates laudantium quos consequuntur corporis vitae consequatur. Dolor tenetur placeat ad quasi earum nesciunt? Doloribus sint ex, repellat atque ipsa inventore voluptatem consequatur quaerat nemo suscipit magni harum fugiat ad perspiciatis alias provident. Facere reprehenderit quis praesentium delectus in architecto incidunt blanditiis accusantium molestiae culpa. Reprehenderit iste nulla eius placeat sunt quae laboriosam earum veritatis veniam molestias optio dignissimos nisi eaque, ea dolorem possimus debitis molestiae iusto beatae officiis? Officiis delectus, corporis vel facilis nisi eius quae recusandae quaerat officia deleniti sint adipisci, necessitatibus accusantium quis optio sequi. Explicabo harum vel alias perferendis quisquam.</p>
</div>
</div>
<img src="https://cdn.pixabay.com/photo/2019/09/05/20/30/girl-4455005_960_720.jpg" alt="Girl with a Horse">
</body>
</html>
Here you can see the Screenshot of the actual Problem I have after opening the document in the browser.
My <div class="text"> block goes under the picture, but in the fullscreen it works fine. Please help me, it's my first experience with HTML and CSS.
Welcome to Stack Overflow! Nice to have your question, it looks like you simply need to handle the CSS Layout and still want it to be browser-width-friendly, or cross-device. I suggest learning Flexbox CSS Layout. Take your time learning the guides, this may be helpful for a quick start.
article{display:flex}
.container{flex-direction:column}
p {width: 300px; flex-grow:3}
img {width:300px; flex-grow: 4}
<article>
<div class="container">
<h1>I'm title here</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat ullam nulla officiis magnam quos repellat aliquam, nam eaque aspernatur modi possimus expedita dolores rem hic veniam quis veritatis repudiandae perspiciatis mollitia ipsam labore iusto! Corrupti qui asperiores facilis unde! Asperiores facere id ullam quod magnam animi laboriosam voluptates obcaecati modi possimus perspiciatis ad vero, esse fugit sint ab hic eligendi tenetur deleniti omnis ipsam nobis illum placeat! Sunt id quaerat impedit laborum ratione aperiam quo est quis eveniet dolor non, explicabo ab esse voluptate corporis minima omnis quae necessitatibus natus architecto distinctio. Asperiores officiis minima, quasi esse mollitia vel pariatur atque reiciendis laudantium cum, amet non delectus nemo suscipit error?<br><br> Laudantium incidunt voluptate sequi consequuntur cum magni sapiente maiores eos iure provident totam iste vel similique excepturi ipsam ipsum nobis unde deleniti nisi ullam, vero, quam quos. Labore tenetur consectetur commodi eius neque deleniti fugit quae ad iusto, eveniet aliquam quam itaque dignissimos, iure sit facilis voluptates laudantium quos consequuntur corporis vitae consequatur. Dolor tenetur placeat ad quasi earum nesciunt? Doloribus sint ex, repellat atque ipsa inventore voluptatem consequatur quaerat nemo suscipit magni harum fugiat ad perspiciatis alias provident. Facere reprehenderit quis praesentium delectus in architecto incidunt blanditiis accusantium molestiae culpa. Reprehenderit iste nulla eius placeat sunt quae laboriosam earum veritatis veniam molestias optio dignissimos nisi eaque, ea dolorem possimus debitis molestiae iusto beatae officiis? Officiis delectus, corporis vel facilis nisi eius quae recusandae quaerat officia deleniti sint adipisci, necessitatibus accusantium quis optio sequi. Explicabo harum vel alias perferendis quisquam.</p>
</div>
<img src="https://cdn.pixabay.com/photo/2019/09/05/20/30/girl-4455005_960_720.jpg" alt="Girl with a Horse">
</article>
You can change the flex-grow property of both text and image for them to be of desired ratio.
I have just been playing around in FF32 & Safari 7, with position: sticky. And it works perfecly with top: 0px or left: 0px (to stick horizontally), but it doesn't seem to work when I try bottom: 0px or even better, combine bottom: 0; left: 0 it doesn't set itself to the bottom of the element. This behaviour could be tried out here: http://html5-demos.appspot.com/static/css/sticky.html, by simply changing the top: 10px attribut to bottom: 0. Is that not supposed to work?
I think it is a valid use-case to stick something to the bottom in the same way as one would want to stick something to the top.
In our case it is, because I am interested in having something sticky on horizontal scroll, but I want this element to be at the bottom of the parent element.
Anyway, any suggestions and extra info are welcome.
position: sticky;
bottom: 30px;
does work. Keep in mind sticky elements are relative to their parent.
http://codepen.io/corysimmons/pen/QyBMXN?editors=1100 (in Firefox)
In this case, <section> (the blue area) is the parent.
It does not work with Stickyfill though https://github.com/wilddeer/stickyfill#what-it-doesnt
I suggest you play around with it for a bit longer til you get the hang of it.
Let me know if you need a JS plugin that will behave like position: sticky without having to use position: sticky (can't wait for browser support or a stronger polyfill though).
The way to think about an element with position: sticky is as follows:
"The item that has position: sticky shall always remain in its normal place inside its parent, UNLESS said normal place goes outside of the viewport, in which case sticky item should become fixed relative to the viewport. All bets are off if the parent container also leaves the viewport, in which case the sticky items gets scrolled away with it".
This Codepen illustrates it really well. Notice how the red box stays in its normal place as long as the parent blue box is in normal view. However, when you scroll such that the red box starts to go out of the viewport, it gets fixed. Finally when the blue parent gets scrolled out of the view entirely, the red box also disappears.
* {
box-sizing: border-box;
}
body {
height: 3000px;
padding: 3rem;
}
section {
background: dodgerblue;
color: white;
line-height: 1.5;
padding: 30px;
}
div {
display: block;
width: 100px;
height: 100px;
background: tomato;
position: sticky;
bottom: 30px;
}
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt. Numquam voluptate, velit quisquam ipsa molestias laudantium odit reiciendis nisi corporis voluptatibus, voluptatum sunt natus, accusantium magnam consequatur fugit officiis minima voluptatem consequuntur nam, earum necessitatibus! Cupiditate ullam repellendus, eius iure voluptas at commodi consectetur, quia, adipisci possimus, ex mollitia. Labore harum error consectetur officiis aut optio, temporibus iste nobis ducimus cumque laudantium rem pariatur. Ut repudiandae id, consequuntur quasi quis pariatur autem corporis perferendis facilis eius similique voluptatibus iusto deleniti odio officia numquam tenetur excepturi, aspernatur sunt minima aut fugiat ipsam. Ea nesciunt, amet fugit facere similique dolor nam tempora perferendis aut fugiat non, ex pariatur excepturi odio aspernatur libero saepe ducimus rem magni cumque. Laboriosam nisi fuga accusantium quos qui? Maiores ratione aliquam eos odio eius molestiae nesciunt exercitationem dolor perspiciatis quam. Necessitatibus rem nihil ad culpa, tenetur iusto consectetur rerum, delectus neque? Error, quas, eaque! Quibusdam voluptas expedita possimus consequatur accusantium distinctio, esse quisquam, ipsa blanditiis, officia perferendis et? Iste, nam optio vero earum tenetur voluptatibus modi a, odit aliquid eos corporis nulla saepe vel neque voluptate ratione, facilis quo sed nisi voluptates nostrum dolor. Non mollitia dignissimos laudantium quos libero nisi, nobis harum, asperiores soluta reprehenderit doloremque ipsa id unde voluptates beatae deserunt. Minima repellendus ipsam molestias veritatis pariatur nobis nihil, alias quasi, esse, aspernatur saepe beatae, hic consequatur. Sit sequi, libero quisquam quibusdam fuga tempore ab molestiae praesentium, necessitatibus, vero odio ullam qui non totam voluptas reprehenderit ad neque voluptate. Nam atque impedit ducimus, dolore reiciendis delectus inventore beatae cumque. Magni, id quos officiis soluta consequatur nam quis, modi fugit adipisci vel autem dolorum iusto cumque, libero reprehenderit amet doloremque voluptatem sunt sapiente reiciendis omnis, similique nulla enim. Autem repellendus, illo eveniet recusandae quae quibusdam itaque, delectus, consequatur provident vitae vero magnam repudiandae fugit, placeat sapiente! Omnis, possimus natus obcaecati sunt harum impedit, veniam quae numquam cum eos. Suscipit nihil totam itaque odio assumenda nemo? Eos iusto voluptas, consectetur sit totam velit fuga ea impedit laboriosam, dignissimos neque ipsum! Nostrum, recusandae. Autem sit aperiam culpa neque quaerat, voluptatibus repellendus. Magnam voluptatem illo quidem sapiente, nemo neque temporibus unde harum mollitia sit dignissimos eligendi accusantium, deserunt numquam, recusandae aperiam iure vero tenetur ea suscipit. Necessitatibus vel, omnis praesentium pariatur officia! Odio maxime dolor vitae ab deleniti et accusantium, iure molestiae eaque soluta sequi, autem, quae ex labore hic dicta temporibus quibusdam animi modi qui necessitatibus nulla. Perspiciatis molestiae architecto culpa quaerat amet fuga, fugiat laboriosam tempore at adipisci, tempora laborum ducimus alias corporis beatae dolor repellendus reiciendis aut cum. Quos enim quae dolores voluptates deleniti est eum beatae impedit unde quidem cumque, labore, quod a asperiores tempora vel blanditiis? Facere corporis mollitia vitae! Exercitationem esse perferendis, et aliquid iste saepe, quos, qui dolore est facere porro. Sapiente nesciunt, ad nostrum hic optio omnis libero autem minus eius, perferendis numquam adipisci corporis nisi ipsa assumenda possimus repudiandae distinctio vel accusamus quam animi esse eos natus pariatur. Molestiae in temporibus ipsum, eveniet itaque minus facilis magnam corporis amet, aspernatur ducimus iste quis numquam laudantium saepe optio nam nisi dolore necessitatibus perferendis hic non ea labore. Impedit rerum laudantium amet aperiam. Debitis tenetur veniam molestiae ab labore maxime incidunt iste commodi recusandae, adipisci obcaecati, molestias placeat aperiam atque, dolorum facere quae nesciunt. Facere aspernatur dolore consequatur tempora veritatis qui et eos quo voluptatum ipsum nemo rerum debitis nostrum, atque ratione aliquam nulla cumque aperiam officiis? Corporis a sunt, quis vel, quae molestias vitae recusandae magni! Nostrum animi totam dolore nemo voluptatem? Nihil consequuntur corrupti quaerat quis dolorum! Culpa, at quibusdam, saepe quas accusamus sequi tempore molestiae perferendis error fugiat, in totam laboriosam. Mollitia necessitatibus eius nisi, blanditiis rem commodi doloremque dicta, hic cumque quod possimus, obcaecati nesciunt deserunt. Vel id quas aliquam, fugiat repellendus perferendis voluptate consectetur deleniti cumque harum odit dolores ducimus facere? Mollitia qui dolore ut quod facere, recusandae repellendus debitis minus aliquid delectus inventore numquam ipsam fugit doloribus, voluptatum, earum eveniet ipsa, impedit fuga! Illo ipsa dolor id enim facere ipsam similique consectetur porro sequi ea perspiciatis soluta provident, ex amet nulla quos sit. Rerum nam, odit dignissimos! Delectus, corporis perspiciatis magni tempore praesentium dolorem magnam architecto earum animi, vero, obcaecati alias distinctio quae eligendi eos doloremque assumenda. Neque temporibus doloremque, natus deserunt ipsam repellendus. Dolorum consequuntur culpa esse modi adipisci, rem natus at fuga id, architecto delectus! Culpa quaerat nulla magnam sint repudiandae, impedit quisquam iure illum, natus at nesciunt fuga obcaecati excepturi fugiat ea sed repellendus repellat aliquid vel, sunt dolores quae. Omnis nulla soluta natus consequuntur tempore, in esse autem reprehenderit cum totam fugit voluptate libero hic asperiores perspiciatis a, odio voluptatibus non alias inventore delectus impedit praesentium doloribus. Veritatis qui adipisci quisquam voluptates, similique consequatur repudiandae dignissimos accusantium rerum beatae fuga inventore. Sequi soluta maxime facere laudantium sint quae ab, dolores provident doloremque maiores quo eaque commodi veritatis, eligendi illo ipsum. Suscipit, veniam, cumque quidem, distinctio debitis magnam nesciunt dolore reiciendis minus accusantium quod ullam eaque magni. Adipisci debitis a, repellat suscipit doloribus officiis asperiores vero veritatis aliquam praesentium nihil corrupti, ipsam. Quae esse hic fugit, in harum illum laboriosam odio mollitia at dolor nam quisquam aperiam quidem error vero voluptatibus, quos dolorem ratione odit illo libero unde sunt distinctio rerum! Repellat omnis dolorum fuga dolor, molestias earum. Iure, repellendus quae nostrum temporibus odio ad. Nihil quidem enim unde nesciunt, velit esse eveniet nisi architecto ad perferendis obcaecati eum iste ipsum eligendi ut necessitatibus veritatis officiis minus non laborum. Tempore explicabo nostrum nihil. Sed eius, iure nisi saepe. Neque eaque, consectetur nostrum aliquam amet praesentium, dicta excepturi ducimus voluptatibus illum consequatur, rerum veniam omnis eos enim. At asperiores, soluta sapiente amet. Ipsum in sint iusto, cumque possimus iure quia fugiat. Facere ratione consequuntur deleniti nisi, nostrum esse. Et amet deserunt unde aliquid, magni, incidunt fugiat illo neque consequatur eum cum, alias repellendus odit voluptate. Hic ducimus, quidem, excepturi delectus rerum placeat illo exercitationem nesciunt natus voluptatum modi sequi consectetur praesentium quae eaque mollitia! Architecto excepturi atque, molestias natus.
</p>
<div></div>
</section>
If you know the height of the sticky element then you can use something like this:
.sticky-element {
position: sticky;
top: calc(100vh - 50px);
}
This would also work with Stickyfill. Not sure about browser support though.
body {
min-width: 600px;
min-height: 400px;
}
.container {
background-color: #9588c170;
/* , */
position: absolute;
width: 100%;
height: 100%;
/* overflow: scroll; */
overflow: auto;
}
.sticky {
width: 300px;
height: 200px;
background-color: #9588c1;
/* , */
position: sticky;
left: 1000px;
top: 900px;
}
<div class="container">
<div class="sticky">div</div>
</div>
.sticky-container {
position: sticky;
top: 100vh; // push it to the bottom from top
transform: translateY(-100%); // move it up again depending on its own height
width: 100%;
background: white;
padding: 20px 0;
}
with the following html:
<div id="bottom-left">I'm in the bottom left!</div>
and the following css:
#bottom-left {
width: 250px;
height: 250px;
color: #fff;
background-color: #000;
position: fixed;
bottom: 0;
left: 0;
}
you should have a sticky div in the bottom left corner of the page
Example: http://jsfiddle.net/wjxws9hy/