So, This is a very specific problem:
I want you to run the code, and open it in a full window.
Now please inspect the following code, and toggle the responsive mode.
Now, change the dimensions to something small, until you can see a hamburger.
Now click the hamburger. Works fine?
Now close the hamburger.
Scroll until the end of the page, in this mobile view.
Now try opening the hamburger. Most probably it won't work.
Now scroll to about just below the top of the page in the responsive mobile view. Here open the hamburger. You should be able to see a glitched out half menu like included in the image.
I don't know why or how this is happening. Could someone please reslove this? Any help will be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;800&family=Quicksand:wght#300&family=Roboto:wght#900&display=swap" rel="stylesheet">
<style>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
#font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
#media (max-width: 800px) {
.navlinks {
top: 90px;
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
#media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
Nikita Gada
<ul class="navlinks">
<li>About Me</li>
<li>Education</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>
I set a top : 80px on your navlinks in your #media (max-width: 800px) and it seems to be working. Take a look.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;800&family=Quicksand:wght#300&family=Roboto:wght#900&display=swap" rel="stylesheet">
<style>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
#font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
#media (max-width: 800px) {
.navlinks {
position: fixed;
/* line I added */
top:90px;;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
#media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
Nikita Gada
<ul class="navlinks">
<li>About Me</li>
<li>Education</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>
Well, The problem is you never define the top property of the .navlinks. Please check the snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;800&family=Quicksand:wght#300&family=Roboto:wght#900&display=swap" rel="stylesheet">
<style>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
#font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
#media (max-width: 800px) {
.navlinks {
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
top: 90px;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
#media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
Nikita Gada
<ul class="navlinks">
<li>About Me</li>
<li>Education</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>
just add top: 90px; to #media (max-width: 800px) { .navlinks {top: 90px;}}
<style>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
#font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
#media (max-width: 800px) {
.navlinks {
position: fixed;
top: 90px;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
#media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;800&family=Quicksand:wght#300&family=Roboto:wght#900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
Nikita Gada
<ul class="navlinks">
<li>About Me</li>
<li>Education</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>
Please add CSS property in .navlink class. i have added " top:90px; " in this class. when applying position fixed to any element add specific two side values like left and top, Or top and right, Or right and bottom, Or left and bottom.
.navlinks {
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
top: 90px;
background: #222831;
}
Related
Why do I have two vertical scrollbars and how do I remove one? The lorem is just so I can scroll and see how it looks like :) Sorry for some of the content being in another language aswell.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-x: hidden;
}
body {
background-color: #262626;
font-family: "Roboto Slab", serif;
position: relative;
overflow-x: hidden;
}
main {
width: 100vw;
height: 100vh;
}
#backdrop {
width: 90%;
height: 100%;
margin: 0 auto;
margin-top: 1rem;
border-radius: 1rem 1rem 0 0;
background-color: #727365;
}
#home-link {
color: #f2f2e4;
text-decoration: none;
font-size: 1.7rem;
font-family: "Space Mono", monospace;
font-weight: 400;
position: absolute;
top: 1.95rem;
left: 2.6rem;
}
/* Hamburger menu */
#menu a {
text-decoration: none;
color: #3f403b;
}
#menu a:hover {
color: #0c0c0c;
}
#menu-toggle {
display: block;
position: absolute;
top: 2.5rem;
right: 3rem;
z-index: 1;
}
#menu-checkbox {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menu-toggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #f2f2e4;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
opacity 0.55s ease;
}
#menu-toggle span:first-child {
transform-origin: 0% 0%;
}
#menu-toggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menu-checkbox:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #3f403b;
}
#menu-checkbox:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menu-checkbox:checked ~ span:nth-last-child(2) {
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
width: 60vw;
height: 70vh;
position: absolute;
right: -100px;
margin: -100px 0 0 0;
padding: 50px;
padding-top: 125px;
border-radius: 1rem;
background-color: #bfbfae;
list-style: none;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menu-checkbox:checked ~ ul {
transform: none;
opacity: 1;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-thumb {
border-radius: 100px;
border: 3px solid transparent;
background-clip: content-box;
background-color: rgb(88, 88, 88);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(109, 109, 109);
}
/* Media queries */
#media only screen and (min-width: 600px) {
}
#media only screen and (min-width: 769px) {
#backdrop {
width: 98%;
height: 96.5%;
border-radius: 1rem;
}
#menu-checkbox {
display: none;
}
#menu-toggle span {
display: none;
}
#menu {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
transform: none !important;
background-color: #bfbfaee1;
padding: 0 1rem 0 1rem;
border-radius: 2rem;
font-family: monospace;
position: fixed;
top: 102vh;
right: 50%;
translate: 50% 0;
height: fit-content;
width: 45vw;
display: flex;
justify-content: space-between;
}
#menu li {
display: inline;
font-size: 1.2rem;
}
#active {
background-color: blue;
border-radius: 3rem;
}
.menu-links {
padding: 8px 35px 8px 35px;
}
#home-link {
display: flex;
justify-content: center;
position: static;
padding-top: 0.5rem;
}
}
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Överdäckningen | Startsida</title>
<link rel="stylesheet" href="css/style.css" />
<script src="script/js.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#200;300;400&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap"
rel="stylesheet"
/>
</head>
<body>
<main>
<div id="backdrop">
<header id="wrapper">
<nav>
ÖVERDÄCKNINGEN
<div id="menu-toggle">
<input id="menu-checkbox" type="checkbox" />
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<ul id="menu">
<li><a class="menu-links" id="active" href="#">Länk 1</a></li>
<li><a class="menu-links" href="#">Länk 2</a></li>
<li><a class="menu-links" href="#">Länk 3</a></li>
<li><a class="menu-links" href="#">Länk 4</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro amet
dolores nisi delectus ad inventore laboriosam alias, architecto eos
sunt quod eum maiores provident aspernatur debitis ratione minus
quaerat cumque veniam. Delectus commodi odit molestiae excepturi.
Doloremque rem tempora quod est veritatis earum accusamus vel fugiat
numquam reprehenderit ad labore repudiandae recusandae neque
voluptatum a nulla dignissimos sapiente ut, officiis fugit porro.
Aliquid unde incidunt quisquam. Veniam sunt doloremque modi in
voluptates inventore. In corrupti hic eos, incidunt iusto dignissimos
praesentium ut adipisci possimus officiis nesciunt, eveniet asperiores
illum laudantium aliquid dicta temporibus aut maxime dolor fugit totam
animi velit repudiandae ea? Esse, quod repudiandae amet iusto
temporibus aperiam dolore aliquid, magni sunt eveniet deleniti at
suscipit quasi adipisci, quo officia accusantium repellat nostrum
nemo! Reiciendis repellat omnis facilis qui excepturi assumenda id
laborum vero voluptas, vitae aspernatur eius magnam voluptates iusto,
dolores a fugit tenetur quo nostrum ipsa sequi cumque? Velit voluptate
et at aut iste obcaecati nisi, vitae repellat placeat quasi iusto.
Rerum vero eos earum nobis in inventore quos aliquid id, assumenda
tempora? Modi repudiandae dolorem architecto ut animi doloribus,
tempore possimus nihil ipsum accusamus fugiat laboriosam culpa iure
eum mollitia ab? Quidem quas minus necessitatibus voluptate, rem vero
eligendi possimus totam voluptates laudantium atque illo provident
quasi! Laboriosam quo odio quia in! Commodi voluptatem facilis eos
neque non, magni fugiat numquam consectetur, ipsa dolores ut rerum,
sint sequi quos illo obcaecati omnis harum laudantium error inventore
praesentium. Commodi fugit nostrum asperiores vel ducimus
reprehenderit quis suscipit laborum et fugiat libero eius assumenda
esse nobis, iste, impedit ipsa repudiandae aut aspernatur placeat
inventore! Eligendi sit in obcaecati quia repudiandae explicabo
officia eveniet omnis earum. Quibusdam alias amet quas nobis ullam
vitae enim quod facilis quam maiores! Rem consequatur distinctio
laudantium harum labore, minus qui molestiae suscipit modi libero quia
pariatur maxime hic, voluptate totam numquam, illo beatae voluptatibus
atque ipsa assumenda. Ipsum laudantium, modi nam repellat similique
vitae asperiores corrupti accusamus voluptate maxime harum expedita,
ipsa fugiat obcaecati deserunt porro impedit blanditiis error
reprehenderit temporibus ex at, molestias eius magnam? Voluptatem,
repellat ratione distinctio sit odio assumenda non ad fugit eligendi
nemo eveniet enim porro asperiores, aliquam aliquid? Officia
reiciendis libero tempore cupiditate rem laboriosam odit aspernatur!
Perferendis, id odit. Laudantium, culpa. Iure placeat deserunt
consectetur! Cumque, asperiores itaque nobis laudantium fuga fugit,
nemo autem maiores quo et perferendis laborum illum quis suscipit
eveniet ullam modi. Soluta cum eaque, sequi eveniet deserunt quia odio
officia tenetur vero corrupti labore eum voluptatum quam cumque fuga
hic numquam! Ullam, a dolore omnis nemo beatae at possimus eum
officiis molestiae exercitationem temporibus ab blanditiis voluptatum
reiciendis mollitia maxime perspiciatis harum nostrum officia deleniti
delectus. Hic quos molestias rerum ducimus fugiat consectetur facilis
perspiciatis animi, incidunt error ut tenetur similique unde molestiae
labore perferendis sapiente totam mollitia! Qui, similique ad eos,
cumque laudantium sapiente dolores quas omnis nam fuga exercitationem
blanditiis quaerat aut animi at beatae explicabo nihil adipisci.
Voluptatum qui repudiandae provident ratione, tenetur illum fuga quas
sapiente laborum ipsa obcaecati aut quod perspiciatis, ullam, veniam
explicabo nulla quaerat incidunt quidem! Est odit corrupti quibusdam
doloribus! Vel excepturi voluptatum, nobis voluptatem error
consectetur placeat quibusdam architecto! Molestiae ipsum suscipit est
aperiam veniam nobis laboriosam porro alias, sit eos repellendus
labore, ratione unde ducimus, accusantium illum voluptatum. Tempore,
rem repellat, laboriosam velit aut aliquid ipsa quibusdam consectetur
soluta veniam architecto totam! Reiciendis aliquid vel voluptatem
tempore ea, unde officiis. Corrupti perspiciatis voluptates, suscipit
vero voluptatibus corporis commodi excepturi reprehenderit eos et
nulla voluptatem fuga porro maxime quam eius distinctio, at id aliquid
itaque consequuntur ut repudiandae. Officiis, qui eveniet animi
officia voluptate ipsum, fuga, nisi doloribus in obcaecati quia error
eaque ad cupiditate aliquam alias modi placeat mollitia quibusdam
illum quas aliquid sint? Eligendi, nostrum maiores quas iste
recusandae quae natus impedit consequatur id ipsam dignissimos sequi
excepturi, nobis ducimus dolorum tenetur repellendus praesentium in
dicta atque velit voluptatum quia. Placeat culpa aliquid ab natus
quaerat non quasi cupiditate reprehenderit soluta, unde repellendus
illum, praesentium distinctio blanditiis quod magnam laborum excepturi
iusto molestiae accusamus dolorem nihil. Voluptatum, molestias
debitis? Ipsum veritatis iure suscipit, saepe alias aliquam enim,
officiis deleniti soluta ratione tempora maxime ab beatae autem
accusamus nemo sit, porro dolore illum esse hic. Repudiandae expedita
iste, inventore, officia, ut voluptatibus unde ullam sint debitis enim
ipsa dolorum ducimus quos. Suscipit tenetur ratione sed iure! Tempora
maxime, et neque natus dolores aliquam hic magni commodi quod a vel
delectus quisquam aperiam cupiditate eaque aspernatur tempore atque
tenetur modi? Exercitationem repellat hic officiis atque aperiam
repellendus et eos quisquam ratione, quidem enim quae sint facere
laudantium amet iure? Dolorum esse autem corrupti explicabo laborum
eum at distinctio dicta aut molestias sunt, totam ab eligendi
possimus. Ipsa, dolorem numquam sint doloribus reprehenderit
laboriosam aperiam alias, culpa recusandae minima assumenda tempore
placeat sunt nesciunt, dolores quidem repudiandae dolor. Ipsa illo, ex
repellat iusto ea fugit sapiente hic, adipisci nam, soluta numquam
error eum neque quos commodi quae a architecto voluptas perspiciatis?
Velit impedit libero ut sit minima exercitationem delectus nobis
quibusdam ab excepturi, soluta maxime ipsum, maiores laudantium iste?
Atque corrupti cupiditate non deserunt alias deleniti delectus numquam
repellendus soluta obcaecati fugit veniam, porro asperiores nesciunt
sed hic esse iusto ipsam provident est praesentium nam eveniet neque
at. Eaque aliquid ipsam vitae. Impedit quas est asperiores sunt
recusandae, iure beatae accusantium quidem quos iste sint sed
architecto eum perferendis dolorum tempora nihil odio error.
</p>
</div>
</main>
</body>
</html>
The lorem is just so I can scroll and see how it looks like :) Sorry for some of the content being in another language aswell
Change the css for html from overflow: hidden-x to overflow:hidden
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow: hidden;
}
body {
background-color: #262626;
font-family: "Roboto Slab", serif;
position: relative;
overflow-x: hidden;
}
main {
width: 100vw;
height: 100vh;
}
#backdrop {
width: 90%;
height: 100%;
margin: 0 auto;
margin-top: 1rem;
border-radius: 1rem 1rem 0 0;
background-color: #727365;
}
#home-link {
color: #f2f2e4;
text-decoration: none;
font-size: 1.7rem;
font-family: "Space Mono", monospace;
font-weight: 400;
position: absolute;
top: 1.95rem;
left: 2.6rem;
}
/* Hamburger menu */
#menu a {
text-decoration: none;
color: #3f403b;
}
#menu a:hover {
color: #0c0c0c;
}
#menu-toggle {
display: block;
position: absolute;
top: 2.5rem;
right: 3rem;
z-index: 1;
}
#menu-checkbox {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menu-toggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #f2f2e4;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
opacity 0.55s ease;
}
#menu-toggle span:first-child {
transform-origin: 0% 0%;
}
#menu-toggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menu-checkbox:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #3f403b;
}
#menu-checkbox:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menu-checkbox:checked ~ span:nth-last-child(2) {
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
width: 60vw;
height: 70vh;
position: absolute;
right: -100px;
margin: -100px 0 0 0;
padding: 50px;
padding-top: 125px;
border-radius: 1rem;
background-color: #bfbfae;
list-style: none;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menu-checkbox:checked ~ ul {
transform: none;
opacity: 1;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-thumb {
border-radius: 100px;
border: 3px solid transparent;
background-clip: content-box;
background-color: rgb(88, 88, 88);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(109, 109, 109);
}
/* Media queries */
#media only screen and (min-width: 600px) {
}
#media only screen and (min-width: 769px) {
#backdrop {
width: 98%;
height: 96.5%;
border-radius: 1rem;
}
#menu-checkbox {
display: none;
}
#menu-toggle span {
display: none;
}
#menu {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
transform: none !important;
background-color: #bfbfaee1;
padding: 0 1rem 0 1rem;
border-radius: 2rem;
font-family: monospace;
position: fixed;
top: 102vh;
right: 50%;
translate: 50% 0;
height: fit-content;
width: 45vw;
display: flex;
justify-content: space-between;
}
#menu li {
display: inline;
font-size: 1.2rem;
}
#active {
background-color: blue;
border-radius: 3rem;
}
.menu-links {
padding: 8px 35px 8px 35px;
}
#home-link {
display: flex;
justify-content: center;
position: static;
padding-top: 0.5rem;
}
}
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Överdäckningen | Startsida</title>
<link rel="stylesheet" href="css/style.css" />
<script src="script/js.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#200;300;400&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap"
rel="stylesheet"
/>
</head>
<body>
<main>
<div id="backdrop">
<header id="wrapper">
<nav>
ÖVERDÄCKNINGEN
<div id="menu-toggle">
<input id="menu-checkbox" type="checkbox" />
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<ul id="menu">
<li><a class="menu-links" id="active" href="#">Länk 1</a></li>
<li><a class="menu-links" href="#">Länk 2</a></li>
<li><a class="menu-links" href="#">Länk 3</a></li>
<li><a class="menu-links" href="#">Länk 4</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro amet
dolores nisi delectus ad inventore laboriosam alias, architecto eos
sunt quod eum maiores provident aspernatur debitis ratione minus
quaerat cumque veniam. Delectus commodi odit molestiae excepturi.
Doloremque rem tempora quod est veritatis earum accusamus vel fugiat
numquam reprehenderit ad labore repudiandae recusandae neque
voluptatum a nulla dignissimos sapiente ut, officiis fugit porro.
Aliquid unde incidunt quisquam. Veniam sunt doloremque modi in
voluptates inventore. In corrupti hic eos, incidunt iusto dignissimos
praesentium ut adipisci possimus officiis nesciunt, eveniet asperiores
illum laudantium aliquid dicta temporibus aut maxime dolor fugit totam
animi velit repudiandae ea? Esse, quod repudiandae amet iusto
temporibus aperiam dolore aliquid, magni sunt eveniet deleniti at
suscipit quasi adipisci, quo officia accusantium repellat nostrum
nemo! Reiciendis repellat omnis facilis qui excepturi assumenda id
laborum vero voluptas, vitae aspernatur eius magnam voluptates iusto,
dolores a fugit tenetur quo nostrum ipsa sequi cumque? Velit voluptate
et at aut iste obcaecati nisi, vitae repellat placeat quasi iusto.
Rerum vero eos earum nobis in inventore quos aliquid id, assumenda
tempora? Modi repudiandae dolorem architecto ut animi doloribus,
tempore possimus nihil ipsum accusamus fugiat laboriosam culpa iure
eum mollitia ab? Quidem quas minus necessitatibus voluptate, rem vero
eligendi possimus totam voluptates laudantium atque illo provident
quasi! Laboriosam quo odio quia in! Commodi voluptatem facilis eos
neque non, magni fugiat numquam consectetur, ipsa dolores ut rerum,
sint sequi quos illo obcaecati omnis harum laudantium error inventore
praesentium. Commodi fugit nostrum asperiores vel ducimus
reprehenderit quis suscipit laborum et fugiat libero eius assumenda
esse nobis, iste, impedit ipsa repudiandae aut aspernatur placeat
inventore! Eligendi sit in obcaecati quia repudiandae explicabo
officia eveniet omnis earum. Quibusdam alias amet quas nobis ullam
vitae enim quod facilis quam maiores! Rem consequatur distinctio
laudantium harum labore, minus qui molestiae suscipit modi libero quia
pariatur maxime hic, voluptate totam numquam, illo beatae voluptatibus
atque ipsa assumenda. Ipsum laudantium, modi nam repellat similique
vitae asperiores corrupti accusamus voluptate maxime harum expedita,
ipsa fugiat obcaecati deserunt porro impedit blanditiis error
reprehenderit temporibus ex at, molestias eius magnam? Voluptatem,
repellat ratione distinctio sit odio assumenda non ad fugit eligendi
nemo eveniet enim porro asperiores, aliquam aliquid? Officia
reiciendis libero tempore cupiditate rem laboriosam odit aspernatur!
Perferendis, id odit. Laudantium, culpa. Iure placeat deserunt
consectetur! Cumque, asperiores itaque nobis laudantium fuga fugit,
nemo autem maiores quo et perferendis laborum illum quis suscipit
eveniet ullam modi. Soluta cum eaque, sequi eveniet deserunt quia odio
officia tenetur vero corrupti labore eum voluptatum quam cumque fuga
hic numquam! Ullam, a dolore omnis nemo beatae at possimus eum
officiis molestiae exercitationem temporibus ab blanditiis voluptatum
reiciendis mollitia maxime perspiciatis harum nostrum officia deleniti
delectus. Hic quos molestias rerum ducimus fugiat consectetur facilis
perspiciatis animi, incidunt error ut tenetur similique unde molestiae
labore perferendis sapiente totam mollitia! Qui, similique ad eos,
cumque laudantium sapiente dolores quas omnis nam fuga exercitationem
blanditiis quaerat aut animi at beatae explicabo nihil adipisci.
Voluptatum qui repudiandae provident ratione, tenetur illum fuga quas
sapiente laborum ipsa obcaecati aut quod perspiciatis, ullam, veniam
explicabo nulla quaerat incidunt quidem! Est odit corrupti quibusdam
doloribus! Vel excepturi voluptatum, nobis voluptatem error
consectetur placeat quibusdam architecto! Molestiae ipsum suscipit est
aperiam veniam nobis laboriosam porro alias, sit eos repellendus
labore, ratione unde ducimus, accusantium illum voluptatum. Tempore,
rem repellat, laboriosam velit aut aliquid ipsa quibusdam consectetur
soluta veniam architecto totam! Reiciendis aliquid vel voluptatem
tempore ea, unde officiis. Corrupti perspiciatis voluptates, suscipit
vero voluptatibus corporis commodi excepturi reprehenderit eos et
nulla voluptatem fuga porro maxime quam eius distinctio, at id aliquid
itaque consequuntur ut repudiandae. Officiis, qui eveniet animi
officia voluptate ipsum, fuga, nisi doloribus in obcaecati quia error
eaque ad cupiditate aliquam alias modi placeat mollitia quibusdam
illum quas aliquid sint? Eligendi, nostrum maiores quas iste
recusandae quae natus impedit consequatur id ipsam dignissimos sequi
excepturi, nobis ducimus dolorum tenetur repellendus praesentium in
dicta atque velit voluptatum quia. Placeat culpa aliquid ab natus
quaerat non quasi cupiditate reprehenderit soluta, unde repellendus
illum, praesentium distinctio blanditiis quod magnam laborum excepturi
iusto molestiae accusamus dolorem nihil. Voluptatum, molestias
debitis? Ipsum veritatis iure suscipit, saepe alias aliquam enim,
officiis deleniti soluta ratione tempora maxime ab beatae autem
accusamus nemo sit, porro dolore illum esse hic. Repudiandae expedita
iste, inventore, officia, ut voluptatibus unde ullam sint debitis enim
ipsa dolorum ducimus quos. Suscipit tenetur ratione sed iure! Tempora
maxime, et neque natus dolores aliquam hic magni commodi quod a vel
delectus quisquam aperiam cupiditate eaque aspernatur tempore atque
tenetur modi? Exercitationem repellat hic officiis atque aperiam
repellendus et eos quisquam ratione, quidem enim quae sint facere
laudantium amet iure? Dolorum esse autem corrupti explicabo laborum
eum at distinctio dicta aut molestias sunt, totam ab eligendi
possimus. Ipsa, dolorem numquam sint doloribus reprehenderit
laboriosam aperiam alias, culpa recusandae minima assumenda tempore
placeat sunt nesciunt, dolores quidem repudiandae dolor. Ipsa illo, ex
repellat iusto ea fugit sapiente hic, adipisci nam, soluta numquam
error eum neque quos commodi quae a architecto voluptas perspiciatis?
Velit impedit libero ut sit minima exercitationem delectus nobis
quibusdam ab excepturi, soluta maxime ipsum, maiores laudantium iste?
Atque corrupti cupiditate non deserunt alias deleniti delectus numquam
repellendus soluta obcaecati fugit veniam, porro asperiores nesciunt
sed hic esse iusto ipsam provident est praesentium nam eveniet neque
at. Eaque aliquid ipsam vitae. Impedit quas est asperiores sunt
recusandae, iure beatae accusantium quidem quos iste sint sed
architecto eum perferendis dolorum tempora nihil odio error.
</p>
</div>
</main>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: null -->
If you remove the main tag, it should work
This is the layout I want to achieve:
This is what I tried so far. The text kinda overlaps each other.
* {
box-sizing: border-box;
}
body {
background-color: #F9F9F9;
}
p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
width: 300px;
position: relative;
hyphens: auto;
background-color: white;
}
a {
display: block;
position: absolute;
bottom: 0;
right: 0;
}
<p>
<span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, possimus expedita deleniti eum repudiandae rerum distinctio asperiores sit sint, nulla natus! Molestias ipsa quos reiciendis repudiandae blanditiis adipisci aperiam neque, tenetur saepe? Quidem quas modi mollitia consequatur velit earum praesentium non laudantium, vitae accusantium labore aut dolorum odio, veniam iste eum ad quisquam incidunt in expedita libero molestias impedit dignissimos? Debitis, repudiandae? Aperiam vero id, nihil tempora aliquam incidunt, nam ipsum unde odit quos, excepturi modi laudantium itaque alias illo impedit iusto ad officia nobis magni. Perferendis, velit quidem impedit rem asperiores, sint odit facilis mollitia similique nostrum, adipisci excepturi.
</span>
Show More
</p>
How can I achieve this kind of layout?
I don't think this is doable with line clamp so here is another idea to get the same effect without line-clamp. It's a bit hacky but is more supported:
You can also click the show more button:
* {
box-sizing: border-box;
}
body {
background-color: #F9F9F9;
}
p {
overflow: hidden;
width: 300px;
line-height: 1.2em;
height: calc(3 * 1.2em); /* define 3 lines*/
position: relative;
background-color: white;
}
a {
position: absolute;
bottom: 0;
right: 0;
background: inherit;
outline: none;
padding-left: 18px;
}
a:before {
content: "...";
position: absolute;
left: 0;
text-decoration: none;
color: #000;
}
p:focus-within {
height: auto;
}
p:focus-within a {
font-size:0;
}
<p>
<span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, possimus expedita deleniti eum repudiandae rerum distinctio asperiores sit sint, nulla natus! Molestias ipsa quos reiciendis repudiandae blanditiis adipisci aperiam neque, tenetur saepe? Quidem quas modi mollitia consequatur velit earum praesentium non laudantium, vitae accusantium labore aut dolorum odio, veniam iste eum ad quisquam incidunt in expedita libero molestias impedit dignissimos? Debitis, repudiandae? Aperiam vero id, nihil tempora aliquam incidunt, nam ipsum unde odit quos, excepturi modi laudantium itaque alias illo impedit iusto ad officia nobis magni. Perferendis, velit quidem impedit rem asperiores, sint odit facilis mollitia similique nostrum, adipisci excepturi.
</span>
Show More
</p>
I am building my very first website.The slide-in and slide-down animations were working properly until I set the navigation bar (nav-bar) position fixed then the animation got ruined I fixed the slide down animation of .welcome-text but could fix the slide-in animation of #intro.
I would like that slide-in animation slides-in without distorting the other pages - here is the code below;
//HTML
'''<!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>Deborah Palm Tree</title>
<link rel="stylesheet" href="profile.css">
<link rel="stylesheet" href="work.css">
<link rel="stylesheet" href="about.css">
</head>
<section class="Home" id="#Home">
<nav class="nav-bar" id="#nav-bar">
<ul>
<li>Home </li>
<li>Work</li>
<li>About </li>
</ul>
</nav>
<body>
<section id="#Home">
<h1 class="welcome-text"> Welcome to my page! </h1>
<div id="intro" class="page-intro">
<a name="Home">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A modi veniam
repellendus nesciunt
nemoquam Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas
mollitia placeat
perspiciatis
expedita! Explicabo hic expedita soluta eos ullam. Incidunt vitae
laboriosam temporibus iusto
iste maiores dolorum soluta, ipsa minus optio repudiandae adipisci aut
deserunt vel atque
deleniti facere, sint, quas earum a. Ipsum neque, explicabo fuga, expedita
error sequi ratione
atque et fugit adipisci harum ad dolorum! Deleniti similique, reiciendis
ipsam blanditiis a
neque, iste obcaecati, soluta eveniet nostrum praesentium porro culpa
asperiores quisquam unde
sapiente ad dolorum architecto voluptatum? Officia nihil saepe iste
excepturi distinctio
exercitationem veniam, voluptates laudantium repellendus, eligendi omnis
molestiae impedit
necessitatibus incidunt consectetur debitis quisquam assumenda deleniti
quam molestias nemo.
Perspiciatis aperiam sit fugit provident mollitia. Nostrum, fuga quaerat praesentium excepturi
iste impedit consectetur architecto odio blanditiis ducimus aliquid sit! Doloremque, obcaecati
laudantium, quia alias repellendus quos suscipit, modi corporis quidem corrupti incidunt
consequatur laborum necessitatibus eaque perspiciatis quod repudiandae qui! Deserunt, quo error
dolor provident ipsum nostrum dolore nihil veritatis ad quibusdam ducimus suscipit doloremque
neque incidunt nisi temporibus. Atque ipsa labore magni, exercitationem, laudantium nostrum
Officiis deserunt qu quaera dicta eaque vitae, nulla doloribus minima praesentium aliquid
nesciunt. Cumque rem
aspernatur id repellat s placeat corrupti eum eos quidem aliquid. Hic numquam quos sequi est
dignissimos magnam
voluptatibus maiores excepturi ratione reiciendis quia fugiat ipsa voluptatem nobis accusamus
sint asperiores neque,
animi nemo eminus sapiente! Culpa temporibus illum ullam rem quae aspernatur doloribus ut
voluptatum nihil
quo laborum, a provident. Iste ratione inventore saepe architecto recusandae.
</p>
</a>
EXPLORE
</div>
</section>
<section class="Work" id="#Work">
<h2 class="h2-Work"> WORK </h2>
<a name="Work">
<p class="p-Work">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam nobis ex veritatis nostrum harum sit,
cupiditate aliquid tempore, suipit neque eveniet quisquam sed, ratione blanditiis eaque nemo quibusdam.
debitis numquam cum odio dicta ducimus pariatur ullam! Nesciunt facere reprehenderit cupiditate aperiam
repudiandae autem blanditiis magni ea, odit molestiae quo ad vero ratione cumque beatae voluptatem porro
ipsum, ducimus dignissimos eaque quibusdam quod. Velit facilis ipsum, harum amet quaerat perferendis
suscipit officiis recusandae voluptatibus cum numquam quisquam alias? Vero deserunt commodi ea dolores. Fuga
debitis inventore temporibus harum porro! Atque maxime iste hic aperiam sunt reprehenderit, dignissimos
dolorem perferendis possimus exercitationem iure commodi modi repellendus at esse labore magnam quia
quibusdam maiores, quaerat nesciunt nobis! Eius saepe, quo itaque rem quia quae sequi tempora, ratione
eveniet, possimus sunt! Tempore nemo, quia reprehenderit dolorum totam quae? Magnam non ratione esse,
laudantium ducimus ullam officiis! In placeat ut libero rem consectetur dolorem ullam consequatur suscipit
amet sunt voluptas, harum dolorum quaerat similique, perspiciatis, ratione officia id obcaecati ipsa
perferendis repellendus. Explicabo animi repellat a vel in, doloremque eum officiis reiciendis ipsam quis
deleniti assumenda quibusdam fuga recusandae impedit asperiores eos cum aperiam labore vero molestiae? Odio
aut laboriosam perspiciatis aspernatur blanditiis excepturi provident consectetur beatae.
perferendis neque minima a labore excepturi recusandae earum ut alias, culpa molestias voluptate est iste
reiciendis! Velit, debitis quasi sit commodi dicta sunt, minus vel modi dolores repellat laudantium,
suscipit Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ullam ducimus velit quisquam
provident. Saepe, dolores suscipit harum adipisci dicta obcaecati officiis voluptatibus, cupiditate iure
nostrum, nemo voluptatem facere cum. Exercitationem ipsam ab est et porro, debitis, sapiente nam recusandae,
illo delectus ea. Consequuntur provident exercitationem dolore numquam repellendus nam voluptas at modi
repellat non dolores nemo laborum molestiae aliquid eaque, similique id voluptate. Omnis unde est saepe
asperiores, delectus ipsum dolore. Dicta repellat odit, debitis temporibus incidunt omnis saepe ipsam
consequuntur obcaecati, sit laudantium ratione. Sapiente, reiciendis cumque, exercitationem voluptates,
alias fuga enim consequuntur dolorem consequatur repudiandae modi? Quibusdam.
temporibus vero ducimus reprehenderit quod labore tempora tenetur provident perferendis cumque.
</p>
</a>
</section>
<section class="About" id="#About">
<h3 class="h3-About"> ABOUT </h3>
<a name="About">
<p class="p-About">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam nobis ex veritatis nostrum harum sit,
cupiditate aliquid tempore, suscipit neque eveniet quisquam sed, ratione blanditiis eaque nemo quibusdam.
Soluta Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam repudiandae minima architecto quibusdam
dolore optio nihil assumenda, laboriosam facilis repellat totam dolorem impedit mollitia at nisi a ipsum
aliquam explicabo. perferendis neque minima a labore excepturi recusandae earum ut alias, culpa molestias
voluptate est iste
reiciendis! Velit, debitis quasi sit commodi dicta sunt, minus vel modi dolores repellat laudantium, Lorem
ipsum dolor sit amet consectetur, adipisicing elit. Minima aliquam eligendi culpa, fugit non voluptatem quia
aspernatur optio assumenda dignissimos excepturi, expedita cum voluptates error omnis earum praesentium quas
quidem ipsam doloribus. Beatae, quos. Quam, maxime itaque tenetur repudiandae modi libero nihil nemo qui
temporibus sed impedit minima doloremque earum excepturi accusamus culpa vel sit natus dolor velit, hic,
sapiente ea ut quae. In placeat velit excepturi iste temporibus, illum dignissimos optio repellat totam
asperiores animi voluptatem illo voluptas, odit et molestias pariatur quas! Impedit aut odio similique
vero ducimus reprehenderit quod labore tempora tenetur provident perferendis cumque.
</p>
</a>
</section>
<section class="footer" id="#footer">
<footer>
© Website designed by Deborah Palm Tree.
</footer>
</section>
</body>
</html> '''
//CSS -The HTML has 3 nav-bar items I set the nav-bar position to fixed and its top to
zero to ensure the nav-bar is static as I scroll down the page this affected the slide-
animation of the Home
''' * {
margin: 0;
padding: 0;
}
body {
background-color: black;
text-align: center;
}
.page-intro {
max-width: 960px;
margin: auto;
padding: 0 30px;
}
.welcome-text {
height: 80px;
}
nav.nav-bar {
position: fixed;
top: 0;
background-color: darkolivegreen;
min-width: 100%;
height: 8vh;
}
nav li {
display: inline-block;
margin-right: 5%;
}
nav ul {
list-style: none;
display: flex;
justify-content: flex-end;
}
nav li a {
text-decoration: none;
color: whitesmoke;
}
h1,
.page-intro {
color: whitesmoke;
}
h1.welcome-text {
font-size: 50px;
line-height: 1.3;
animation: slide-down 3s forwards;
}
.h2-Work,.h3-About{
font-size: 25px;
color: antiquewhite;
text-align: center;
padding: 30px 30px 0px 30px;
}
#keyframes slide-down {
0% {
margin-top: -20px;
}
100% {
margin-top: 80px;
}
}
#intro {
animation: slide-in 3s forwards;
}
#keyframes slide-in {
0% {
margin-left: -50%;
}
100% {
margin: 0;
}
}
.btn {
display: inline-block;
color: #fff;
text-decoration: none;
padding: 1rem 2rem;
border: #fff 1px solid;
margin-top: 40px;
opacity: 0;
animation: btn 3s 3s forwards;
transition: transform 1s;
}
.btn:hover {
transform: rotateY(180deg);
}
#keyframes btn {
0% {
bottom: 10%;
opacity: 0;
}
100% {
bottom: 5%;
opacity: 1;
}
}
.p-Work {
color: antiquewhite;
text-align: center;
}
.p-About {
color: antiquewhite;
text-align: center;
}
.footer {
color: antiquewhite;
background-color: cadetblue;
min-width: 100%;
}'''
#intro {
animation: slide-in 3s forwards;
transform: translate(-50%);
position: relative;
left: 50%;
}
position: relative;
This is allowing the element to retain its size in-line with the parent element i.e. it is relative to the box modle of its perant
left: 50%;
This is centering the possition of the element to the middle but
transform: translate(-50%);
By default, all the elements have their center point in the top left of the page and this means that you need to shift that to the center, which is where the transform translate comes into play
Hope this helps
Based on the above all you need is to keep the changes made in my answer above as well as adding the navbar to being fixed:
nav.nav-bar {
position: fixed; (<<<< the nav bar will stay at the top of the page)
top: 0;
background-color: darkolivegreen;
min-width: 100%;
height: 8vh;
z-index: 5; (<<<<<< the content goes under the nav)
}
Z-index is the position of elements, if a z-index is higher than another elements then it will apear infront the the element (this only works for possitioned elements - so it will work here as the possition is set to fixed)
More info here:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
For point 3) intro text should slide in from left side -
This is currently doing so correctly from the code I can see and have edited:
#intro {
animation: slide-in 3s forwards;
transform: translate(-50%);
position: relative;
left: 50%;
}
If there is an issue here let me know :)
I want to align this text ZENZZEX in the first grid. Perfectlly vertical and horizontal, I already aligned it horizontal.
body{
margin: 0;;
}
.navGrid {
display: grid;
grid-template-columns: repeat(6, 1fr);
height: 40px;
position: fixed;
width: 100%;
top:0;
background-color: white;
box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
}
.span-col-4{
grid-column: span 4 / auto;
}
.navGrid .first{
color: black;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 1.2em;
font-weight: 800;
position: relative;
top: 20%;
}
.navGrid .first:hover{
cursor: pointer;
font-size: 1.28em;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
</head>
<body>
<div class="navGrid">
<div class="first">ZENZZEX </div>
<div class="span-col-4 second">Item 2</div>
<div class="third">Item 3</div>
</div>
<div class="content"><h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam hic, adipisci quasi eius nesciunt veniam exercitationem dolorem aperiam id vero perferendis voluptatum ab ad laborum quaerat? Minus exercitationem iure assumenda perspiciatis dolorem ullam? Dolorum accusamus, possimus culpa molestias ipsum sequi animi numquam omnis delectus odio magni id. Obcaecati quo, reiciendis id explicabo veritatis qui excepturi distinctio autem voluptate quaerat dolorem?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla iure ullam, ad nisi distinctio cumque molestiae vitae porro ex nihil facere harum delectus in laborum fugiat corporis maiores deserunt reiciendis laboriosam alias rerum. Nisi corrupti nostrum esse perferendis labore animi iure, nam aut laborum tenetur officia veniam consectetur odio, maxime consequatur deleniti illum harum et dicta quibusdam numquam sit commodi id libero. Facilis, incidunt reprehenderit ad beatae omnis obcaecati adipisci impedit, non quo porro deserunt nemo! Sed quo non reprehenderit! Voluptatibus aspernatur, praesentium harum, quod incidunt fugiat quidem adipisci, itaque pariatur minima deserunt porro velit? Laboriosam, minus! Sit, neque quibusdam.</h1></div>
</body>
</html>
You can do this using flexbox:
.navGrid .first {
color: black;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 1.2em;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
I have this 2 columns layout where the content is fluid, while the right sidebar has a fixed width.
In the example below I have also used Bootstrap, mainly for aesthetic reasons:
.fluid-fixed {
position: relative;
}
.content-wrapper {
float: left;
width: 100%;
}
.content,
.sidebar {
padding: 10px;
border: 1px solid #ccc;
margin-top: 10px;
}
.content {
margin-right: 342px;
clear: both;
overflow: auto;
}
.sidebar {
position: relative;
width: 322px;
margin-left: -322px;
float: right;
overflow: hidden;
background: #fff;
}
main p {
text-align: justify;
}
main .img-thumbnail.float-left {
margin-right: 10px;
}
#media only screen and (max-width: 768px) {
.container {
max-width: 100%;
}
.sidebar {
display: none;
}
.content {
margin-right: 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container fluid-fixed">
<div class="content-wrapper">
<main class="content">
<h2>Lorem ipsum dolor sit consectetur adipisicing elit</h2>
<p><img src="//lorempixel.com/200/150" class="img-thumbnail float-left" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic esse quo, dolorum officia placeat, earum eveniet ipsum? Asperiores magnam laboriosam autem quis, voluptatem eos
explicabo enim quo inventore dolorem modi!</p>
<p>Cupiditate dicta distinctio tempore reiciendis ut? Blanditiis cumque officiis, eius mollitia, ut voluptates incidunt asperiores, vel, ratione adipisci tempora harum. Cum quas ratione animi culpa ipsum quasi eaque architecto tempore!</p>
<p>Vero ullam voluptate quis itaque assumenda a, culpa necessitatibus illo! Porro dignissimos, quidem velit odio laudantium quia excepturi fuga harum veritatis sapiente saepe exercitationem animi eos, at a quaerat praesentium.</p>
<p>Velit asperiores dolorum, saepe iusto, dolor quisquam quaerat numquam ab nesciunt dignissimos ad exercitationem veritatis, repudiandae accusantium placeat nostrum similique quas! Iste labore iusto incidunt a fuga ducimus dolores laudantium.</p>
<p>Ipsum amet facilis beatae ex dicta, eligendi deserunt est sapiente inventore vitae ipsam commodi harum. Quisquam reiciendis dolorem facilis. Repellat temporibus pariatur explicabo quod obcaecati aliquid! Dignissimos, at dolor animi.</p>
</main>
</div>
<aside class="sidebar">
<p>Ipsum amet facilis beatae ex dicta, eligendi deserunt est sapiente inventore vitae ipsam commodi harum. Quisquam reiciendis dolorem facilis. Repellat temporibus pariatur explicabo quod obcaecati aliquid! Dignissimos, at dolor animi.</p>
</aside>
</div>
What I have not been able to achieve is make the 2 columns equal in height. Adding height: 100%; to the sidebar did not work.
What is missing?
You don't need the extra .fixed-fluid class. Use the Bootstrap 4 d-flex class for display: flex;.
<div class="container d-flex">
https://www.codeply.com/go/rplszaWQRF
Flexbox can do that:
.fluid-fixed {
display: flex;
}
.content,
.sidebar {
padding: 10px;
border: 1px solid #ccc;
margin-top: 10px;
}
.content {
clear: both;
overflow: auto;
}
.sidebar {
overflow: hidden;
background: #fff;
}
.sidebar img {
max-width: 100%;
}
main p {
text-align: justify;
}
main .img-thumbnail.float-left {
margin-right: 10px;
}
#media only screen and (max-width: 768px) {
.container {
max-width: 100%;
}
.sidebar {
display: none;
}
.content {
margin-right: 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container fluid-fixed">
<div class="content-wrapper">
<main class="content">
<h2>Lorem ipsum dolor sit consectetur adipisicing elit</h2>
<p><img src="//lorempixel.com/200/150" class="img-thumbnail float-left" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic esse quo, dolorum officia placeat, earum eveniet ipsum? Asperiores magnam laboriosam autem quis, voluptatem eos
explicabo enim quo inventore dolorem modi!</p>
<p>Cupiditate dicta distinctio tempore reiciendis ut? Blanditiis cumque officiis, eius mollitia, ut voluptates incidunt asperiores, vel, ratione adipisci tempora harum. Cum quas ratione animi culpa ipsum quasi eaque architecto tempore!</p>
<p>Vero ullam voluptate quis itaque assumenda a, culpa necessitatibus illo! Porro dignissimos, quidem velit odio laudantium quia excepturi fuga harum veritatis sapiente saepe exercitationem animi eos, at a quaerat praesentium.</p>
<p>Velit asperiores dolorum, saepe iusto, dolor quisquam quaerat numquam ab nesciunt dignissimos ad exercitationem veritatis, repudiandae accusantium placeat nostrum similique quas! Iste labore iusto incidunt a fuga ducimus dolores laudantium.</p>
<p>Ipsum amet facilis beatae ex dicta, eligendi deserunt est sapiente inventore vitae ipsam commodi harum. Quisquam reiciendis dolorem facilis. Repellat temporibus pariatur explicabo quod obcaecati aliquid! Dignissimos, at dolor animi.</p>
</main>
</div>
<aside class="sidebar">
<img src="https://ppc.news/wp-content/uploads/2017/08/Medium-Rectangle-300x250.jpg" alt="banner">
</aside>
</div>
Using display: flex; instead of position: relative; for the <div class="container fluid-fixed"> element did the job.
.fluid-fixed {
display: flex;
}
.content-wrapper {
width: 100%;
}
.content,
.sidebar {
padding: 10px;
border: 1px solid #ccc;
margin-top: 10px;
}
.content {
margin-right: 342px;
clear: both;
overflow: auto;
}
.sidebar {
width: 322px;
margin-left: -322px;
float: right;
overflow: hidden;
background: #fff;
}
main p {
text-align: justify;
}
main .img-thumbnail.float-left {
margin-right: 10px;
}
#media only screen and (min-width: 1280px) {
max-width: 1200px !important;
}
#media only screen and (max-width: 768px) {
.container {
max-width: 100%;
}
.sidebar {
display: none;
}
.content {
margin-right: 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container fluid-fixed">
<div class="content-wrapper">
<main class="content">
<h2>Lorem ipsum dolor sit consectetur adipisicing elit</h2>
<p><img src="//lorempixel.com/200/150" class="img-thumbnail float-left" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic esse quo, dolorum officia placeat, earum eveniet ipsum? Asperiores magnam laboriosam autem quis, voluptatem eos
explicabo enim quo inventore dolorem modi!</p>
<p>Cupiditate dicta distinctio tempore reiciendis ut? Blanditiis cumque officiis, eius mollitia, ut voluptates incidunt asperiores, vel, ratione adipisci tempora harum. Cum quas ratione animi culpa ipsum quasi eaque architecto tempore!</p>
<p>Vero ullam voluptate quis itaque assumenda a, culpa necessitatibus illo! Porro dignissimos, quidem velit odio laudantium quia excepturi fuga harum veritatis sapiente saepe exercitationem animi eos, at a quaerat praesentium.</p>
<p>Velit asperiores dolorum, saepe iusto, dolor quisquam quaerat numquam ab nesciunt dignissimos ad exercitationem veritatis, repudiandae accusantium placeat nostrum similique quas! Iste labore iusto incidunt a fuga ducimus dolores laudantium.</p>
<p>Ipsum amet facilis beatae ex dicta, eligendi deserunt est sapiente inventore vitae ipsam commodi harum. Quisquam reiciendis dolorem facilis. Repellat temporibus pariatur explicabo quod obcaecati aliquid! Dignissimos, at dolor animi.</p>
</main>
</div>
<aside class="sidebar">
<img src="https://ppc.news/wp-content/uploads/2017/08/Medium-Rectangle-300x250.jpg" alt="banner">
</aside>
</div>