CSS Smooth scrolling property not working

CSS Smooth scrolling property not working - html

I know it's a question asked by many people but after dozens of posts I still cannot figure out the answer to this.
I have a simple html page:
<!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>JEFDocs | All Docs | Template</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/module.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" href="index.html">JEF<span>Docs</span></a>
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Open Navigation">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Close Navigation">
<ul class="primary-nav">
<li class="current">All Docs</li>
<li>GitHub</li>
<li>About</li>
</ul>
</nav>
</div>
</div>
<div class="docs-content">
<div class="left-space">
<p>In this page</p>
<ul class="left-nav">
<li>Item1</li>
<li>Item2</li>
</ul>
</div>
<div class="right-space">
<!-------------------------------------------------------------------------------------------------------------------------------->
<h1 id="1">Main Title</h1>
<h3>Subtitle</h3>
<p>
Paragraph
With code:
<pre><code class="pyton">print("Hello world")
x=10
print(x)</code></pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum saepe expedita commodi consectetur ipsum. Deleniti delectus, quas voluptatibus eum dolore accusamus aliquid voluptate a error sunt dolores mollitia. At, mollitia.
A nulla eligendi provident exercitationem! Minus perspiciatis eum vel similique, ducimus illum qui sint magnam, asperiores adipisci nesciunt in, rem assumenda repellendus! Blanditiis corporis, quidem dolore expedita consectetur aliquid eius!
Similique, provident illo nihil, unde iure perspiciatis corrupti, eius ad sint consequuntur asperiores error harum? Laborum beatae in dolorem ullam itaque quos deleniti quae debitis, magnam autem ipsa deserunt? Illo!
Nesciunt perspiciatis a corporis necessitatibus sed asperiores voluptas error saepe tempora rem voluptatibus quae ipsa molestias soluta nostrum, non sunt accusamus fuga numquam ut illo dicta! Deleniti magni doloribus ea.
Odio, quas fugiat harum eos animi suscipit dolorum ipsam aliquid perspiciatis, vitae quam assumenda soluta voluptas delectus? Placeat, repellat. Voluptatibus sint blanditiis explicabo similique, exercitationem et tempora consequatur ex asperiores!
Animi vel dignissimos inventore eligendi quisquam alias vitae earum itaque neque fugiat rem amet culpa atque delectus quod, tenetur praesentium in autem porro quam qui reprehenderit! Corrupti soluta qui illum.
Ut at sint, eius aperiam vitae, magni vel harum distinctio excepturi iusto laborum itaque deserunt cumque eaque. Qui ex quas blanditiis repellat, temporibus ab inventore perferendis sapiente cum quo laborum?
Sunt tempora possimus culpa odit numquam, nobis commodi quod, vero repellat autem nostrum laboriosam. Consequuntur hic excepturi in amet unde voluptatibus a? Optio officia obcaecati voluptatem quod dolores minus doloribus?
Nihil alias nesciunt veniam modi similique blanditiis officiis, ratione obcaecati dolores aliquid quos iusto ducimus excepturi voluptas expedita, laboriosam corrupti illum quibusdam doloribus quaerat? Quaerat neque quia impedit atque vel.
Veritatis placeat officia maiores inventore laborum illo enim vitae, ratione, dolorem esse est! Omnis, libero facere eaque vitae fuga ullam cumque consequatur porro ab recusandae, soluta facilis? Quasi, rem voluptate?
Soluta eius molestiae nemo, maiores dolore ratione placeat! Esse, doloribus tempora sint sed rem reiciendis corrupti. Sit mollitia veniam tempora iusto ipsa voluptate quod, eaque veritatis quasi iste hic quas!
Corporis pariatur, esse ipsum labore alias accusamus voluptatem veritatis ipsa possimus deserunt veniam deleniti facilis aliquam magni quidem, eligendi tempore ab dicta amet optio nesciunt provident voluptas eaque? Inventore, ducimus.
Numquam, deserunt voluptatibus veritatis est omnis ducimus ab tempora cupiditate fuga deleniti officiis velit molestiae facilis eveniet debitis, reprehenderit iure repellendus impedit animi dolorum culpa nostrum rerum illo! Quidem, soluta.
Corrupti sapiente eius necessitatibus nostrum incidunt, modi, in quae accusantium totam minima ducimus, aperiam nulla velit eos. Adipisci dignissimos eveniet, quia, voluptatibus unde repellat aperiam doloremque mollitia fugiat minus dolor.
Maxime sequi pariatur, quod, esse animi placeat quibusdam excepturi doloremque consectetur culpa commodi enim. Autem voluptas quasi excepturi natus laborum quas ad voluptatibus adipisci repellendus quia, ratione minus cupiditate itaque.
Voluptate repellendus id molestiae ipsam impedit aspernatur facere magni. Eveniet aut praesentium officiis ea fugit tenetur pariatur, veritatis deserunt! Beatae, vero odit. Aliquam delectus ipsam maxime repellat tenetur, doloribus iure.
Aspernatur vel suscipit sequi enim recusandae ratione perspiciatis, facere, fugiat incidunt, error iusto quibusdam consectetur eos. Quasi vel neque aperiam aliquid rerum, facilis cupiditate deleniti voluptate modi, nihil sunt distinctio.
</p>
<h1 id="2">Second Title</h1>
<p>
Id totam deleniti sit, magni praesentium velit voluptatum, molestias, recusandae nulla ratione quae blanditiis numquam! Sapiente nam unde quidem. Id dolor libero ipsam dolore incidunt corrupti omnis dolorem! Tempora, impedit?
Officia at cum libero unde ipsa veritatis obcaecati est quod delectus sequi voluptatem veniam consequatur sit nobis eveniet eos ab dolore earum vero, molestias nam! Ducimus optio harum necessitatibus debitis.
Dignissimos quo aspernatur iste, itaque vel voluptates fugiat dolorem maiores assumenda repellat accusamus, illo praesentium tempora aliquid sed doloribus provident, optio quia nihil. Consectetur optio quisquam eum deserunt nostrum delectus.
At libero odio suscipit quae veniam possimus dolores eum praesentium aliquid illo, voluptates similique, dignissimos, magni alias debitis harum nemo. Officia, vel! Quis minima, nesciunt eos ipsum rem quos sed!
Ad possimus error, iste facere aut voluptatem odit, voluptatum ea eos fugiat, quas cupiditate? Dolores architecto doloribus repudiandae necessitatibus repellendus officia tenetur perspiciatis, modi fugiat aliquam, tempora unde maiores doloremque.
A, nam id et adipisci nostrum natus eligendi ducimus est quos sed eveniet? Nobis saepe placeat optio natus, atque est eius nesciunt, quaerat deleniti velit consequatur laborum molestiae error dolore?
Ducimus, quam nostrum ipsam ex dolores maxime impedit corrupti deserunt dolor quod similique. Sed nihil explicabo laudantium a aut provident, ex pariatur aspernatur minus cupiditate saepe accusamus, expedita impedit iste!
Vero vel iure, quaerat unde dolore tempora molestias eum facilis cumque consequuntur non totam aperiam cum voluptas qui nihil incidunt fugiat aliquid! Ipsum accusantium vero quod, fugiat soluta illum recusandae.
Facere veniam ut est, tempora suscipit temporibus esse exercitationem reiciendis ipsam eaque dolorum, maiores dolorem ducimus voluptatem accusantium. Dicta dolorem reiciendis rerum explicabo sint pariatur illum tenetur. Laborum, tenetur repellat!
Inventore, optio quas necessitatibus consectetur atque temporibus porro dolorem dicta incidunt eaque et unde animi! Rem eaque unde placeat accusantium repudiandae blanditiis, quod voluptate natus fuga, nisi sit adipisci totam?
Explicabo consequuntur tempore dignissimos, debitis odit mollitia incidunt atque animi esse facere, ipsa ducimus repellendus deserunt laboriosam aliquam. Autem repudiandae voluptate dicta, reiciendis quos iusto voluptates ipsum rem iure incidunt!
</p>
<!-------------------------------------------------------------------------------------------------------------------------------->
</div>
</div>
<script>
const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit')
ul = document.querySelector('ul')
menuArrow = document.getElementById('menu-arrow');
mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn')
})
mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn')
})
function scrollToTop() {
window.scrollTo({
behavior: 'smooth'
});
}
</script>
</body>
</html>
And a css file:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap");
:root {
--primary-color: #3272B8;
--secondary-color: #132F47;
}
::-webkit-scrollbar {
width: 9px;
height: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--secondary-color);
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-color);
}
html {
scroll-behavior: smooth;
}
.docs-content .left-space {
margin: 1em auto;
width: 90%;
padding: .5em;
background: var(--secondary-color);
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
-webkit-animation: transitionIn 1s;
animation: transitionIn 1s;
}
.docs-content .left-space .left-nav {
font-size: 1.1em;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto auto;
grid-template-columns: auto auto;
}
.docs-content .left-space p {
margin-left: .7em;
font-weight: bold;
font-size: 1.3em;
color: white;
}
.docs-content .left-space a {
color: white;
display: block;
text-decoration: none;
font-size: .8em;
padding: .5em 1em;
}
.docs-content .left-space a:hover {
color: var(--primary-color);
}
#-webkit-keyframes transitionRight {
from {
-webkit-transform: translateX(90px);
transform: translateX(90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes transitionRight {
from {
-webkit-transform: translateX(90px);
transform: translateX(90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.docs-content .right-space {
margin: 2em auto;
width: 90%;
background: white;
overflow-y: scroll;
padding: 1em;
height: 100vh;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
-webkit-animation: transitionRight 1s;
animation: transitionRight 1s;
}
.docs-content .right-space h1 {
margin: 0;
padding: 0;
color: var(--primary-color);
}
#media only screen and (min-width: 768px) {
.docs-content .right-space {
padding: 1em;
overflow-y: scroll;
}
}
#media only screen and (min-width: 1080px) {
.docs-content {
margin: 3em auto;
width: 1080px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.docs-content .left-space {
height: 65.9vh;
width: 33%;
margin-top: 0;
background: var(--secondary-color);
margin-right: 2em;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
padding: 2em;
}
.docs-content .left-space p {
color: white;
font-size: 1.5em;
margin-top: 0;
margin-left: .3em;
}
.docs-content .left-space .left-nav {
border: none;
display: block;
}
.docs-content .left-space .left-nav a {
color: white;
font-size: 1em;
font-weight: 400;
}
.docs-content .left-space .left-nav a:hover {
color: var(--primary-color);
font-weight: bold;
}
.docs-content .right-space {
margin-top: 0;
height: 70vh;
width: 66%;
overflow-y: scroll;
background: white;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
}
.right-space::-webkit-scrollbar {
width: 12px;
}
.right-space::-webkit-scrollbar-track {
background: #f1f1f1;
}
.right-space::-webkit-scrollbar-thumb {
background: var(--secondary-color);
}
.right-space::-webkit-scrollbar-thumb:hover {
background: var(--primary-color);
}
}
/*# sourceMappingURL=module.css.map */
The problem I'm facing is that the html{scroll-behavior: smooth;} is not working at all.
I am also going to include the "main.css" (used to style the navbar at the top) file so that everybody can run this and help me:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap");
#-webkit-keyframes opacityIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes opacityIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes transitionIn {
from {
-webkit-transform: translateX(-90px);
transform: translateX(-90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes transitionIn {
from {
-webkit-transform: translateX(-90px);
transform: translateX(-90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
:root {
--primary-color: #3272B8;
}
body {
background: #f2f2f2f2;
margin: 0;
font-family: 'Poppins';
}
a {
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar {
background: white;
padding: 1em;
}
.navbar .logo {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 1.2em;
}
.navbar .logo span {
color: var(--primary-color);
}
.navbar nav {
display: none;
}
.navbar .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navbar .mobile-menu {
cursor: pointer;
}
.hero {
text-align: center;
margin-top: 3em;
}
.left-col h1 {
font-size: 2.5em;
line-height: 1.3em;
margin-top: .2em;
-webkit-animation: transitionIn 1s;
animation: transitionIn 1s;
}
.left-col .primary-cta {
background: var(--primary-color);
color: white;
border: 3px var(--primary-color) solid;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.left-col .primary-cta:hover, .left-col .primary-cta:focus {
background-color: #F2F2F2F2;
color: var(--primary-color);
border: 3px var(--primary-color) solid;
}
.hero-img {
width: 70%;
margin-top: 3em;
-webkit-animation: opacityIn 3s;
animation: opacityIn 3s;
}
nav.menu-btn {
display: block;
}
nav {
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top: 0;
background: #20272E;
height: 100vh;
padding: 1em;
}
nav ul.primary-nav {
margin-top: 5em;
}
nav li a {
color: white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
}
nav li a:hover {
color: var(--primary-color);
font-weight: bold;
}
.mobile-menu-exit {
float: right;
margin: .5em;
cursor: pointer;
}
#media only screen and (min-width: 768px) {
.mobile-menu, .mobile-menu-exit {
display: none;
}
.navbar .container {
display: -ms-grid;
display: grid;
-ms-grid-columns: 180px auto;
grid-template-columns: 180px auto;
}
.navbar nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background: none;
position: unset;
height: auto;
width: 100%;
padding: 0;
}
.navbar nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.navbar nav a {
color: black;
font-size: 1em;
padding: .1em 1em;
}
.navbar nav ul.primary-nav {
margin: 0;
}
.hero-img {
width: 30%;
margin-top: 6em;
}
}
#media only screen and (min-width: 1080px) {
.container {
width: 1080px;
margin: 0 auto;
}
section {
padding: 4em 4em;
}
.hero .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-align: left;
}
.hero .container .left-col {
margin: 0 3em 0 5em;
}
.hero .container .left-col h1 {
font-size: 3em;
width: 90%;
}
.hero-img {
width: 30%;
margin-right: 8em;
}
.hero-cta {
margin-left: 2em;
}
}
/*# sourceMappingURL=main.css.map */

const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit')
ul = document.querySelector('ul')
menuArrow = document.getElementById('menu-arrow');
mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn')
})
mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn')
})
function scrollToTop() {
window.scrollTo({
behavior: 'smooth'
});
}
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap");
:root {
--primary-color: #3272B8;
--secondary-color: #132F47;
}
::-webkit-scrollbar {
width: 9px;
height: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--secondary-color);
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-color);
}
html {
scroll-behavior: smooth;
}
.docs-content .left-space {
margin: 1em auto;
width: 90%;
padding: .5em;
background: var(--secondary-color);
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
-webkit-animation: transitionIn 1s;
animation: transitionIn 1s;
}
.docs-content .left-space .left-nav {
font-size: 1.1em;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto auto;
grid-template-columns: auto auto;
}
.docs-content .left-space p {
margin-left: .7em;
font-weight: bold;
font-size: 1.3em;
color: white;
}
.docs-content .left-space a {
color: white;
display: block;
text-decoration: none;
font-size: .8em;
padding: .5em 1em;
}
.docs-content .left-space a:hover {
color: var(--primary-color);
}
#-webkit-keyframes transitionRight {
from {
-webkit-transform: translateX(90px);
transform: translateX(90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes transitionRight {
from {
-webkit-transform: translateX(90px);
transform: translateX(90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.docs-content .right-space {
margin: 2em auto;
width: 90%;
background: white;
overflow-y: scroll;
padding: 1em;
height: 100vh;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
-webkit-animation: transitionRight 1s;
animation: transitionRight 1s;
}
.docs-content .right-space h1 {
margin: 0;
padding: 0;
color: var(--primary-color);
}
#media only screen and (min-width: 768px) {
.docs-content .right-space {
padding: 1em;
overflow-y: scroll;
}
}
#media only screen and (min-width: 1080px) {
.docs-content {
margin: 3em auto;
width: 1080px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.docs-content .left-space {
height: 65.9vh;
width: 33%;
margin-top: 0;
background: var(--secondary-color);
margin-right: 2em;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
padding: 2em;
}
.docs-content .left-space p {
color: white;
font-size: 1.5em;
margin-top: 0;
margin-left: .3em;
}
.docs-content .left-space .left-nav {
border: none;
display: block;
}
.docs-content .left-space .left-nav a {
color: white;
font-size: 1em;
font-weight: 400;
}
.docs-content .left-space .left-nav a:hover {
color: var(--primary-color);
font-weight: bold;
}
.docs-content .right-space {
margin-top: 0;
height: 70vh;
width: 66%;
overflow-y: scroll;
background: white;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
}
.right-space::-webkit-scrollbar {
width: 12px;
}
.right-space::-webkit-scrollbar-track {
background: #f1f1f1;
}
.right-space::-webkit-scrollbar-thumb {
background: var(--secondary-color);
}
.right-space::-webkit-scrollbar-thumb:hover {
background: var(--primary-color);
}
}
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap");
#-webkit-keyframes opacityIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes opacityIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes transitionIn {
from {
-webkit-transform: translateX(-90px);
transform: translateX(-90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes transitionIn {
from {
-webkit-transform: translateX(-90px);
transform: translateX(-90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
:root {
--primary-color: #3272B8;
}
body {
background: #f2f2f2f2;
margin: 0;
font-family: 'Poppins';
}
a {
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar {
background: white;
padding: 1em;
}
.navbar .logo {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 1.2em;
}
.navbar .logo span {
color: var(--primary-color);
}
.navbar nav {
display: none;
}
.navbar .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navbar .mobile-menu {
cursor: pointer;
}
.hero {
text-align: center;
margin-top: 3em;
}
.left-col h1 {
font-size: 2.5em;
line-height: 1.3em;
margin-top: .2em;
-webkit-animation: transitionIn 1s;
animation: transitionIn 1s;
}
.left-col .primary-cta {
background: var(--primary-color);
color: white;
border: 3px var(--primary-color) solid;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.left-col .primary-cta:hover, .left-col .primary-cta:focus {
background-color: #F2F2F2F2;
color: var(--primary-color);
border: 3px var(--primary-color) solid;
}
.hero-img {
width: 70%;
margin-top: 3em;
-webkit-animation: opacityIn 3s;
animation: opacityIn 3s;
}
nav.menu-btn {
display: block;
}
nav {
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top: 0;
background: #20272E;
height: 100vh;
padding: 1em;
}
nav ul.primary-nav {
margin-top: 5em;
}
nav li a {
color: white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
}
nav li a:hover {
color: var(--primary-color);
font-weight: bold;
}
.mobile-menu-exit {
float: right;
margin: .5em;
cursor: pointer;
}
#media only screen and (min-width: 768px) {
.mobile-menu, .mobile-menu-exit {
display: none;
}
.navbar .container {
display: -ms-grid;
display: grid;
-ms-grid-columns: 180px auto;
grid-template-columns: 180px auto;
}
.navbar nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background: none;
position: unset;
height: auto;
width: 100%;
padding: 0;
}
.navbar nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.navbar nav a {
color: black;
font-size: 1em;
padding: .1em 1em;
}
.navbar nav ul.primary-nav {
margin: 0;
}
.hero-img {
width: 30%;
margin-top: 6em;
}
}
#media only screen and (min-width: 1080px) {
.container {
width: 1080px;
margin: 0 auto;
}
section {
padding: 4em 4em;
}
.hero .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-align: left;
}
.hero .container .left-col {
margin: 0 3em 0 5em;
}
.hero .container .left-col h1 {
font-size: 3em;
width: 90%;
}
.hero-img {
width: 30%;
margin-right: 8em;
}
.hero-cta {
margin-left: 2em;
}
}
/*# sourceMappingURL=main.css.map */
<!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>JEFDocs | All Docs | Template</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/module.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" href="index.html">JEF<span>Docs</span></a>
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Open Navigation">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Close Navigation">
<ul class="primary-nav">
<li class="current">All Docs</li>
<li>GitHub</li>
<li>About</li>
</ul>
</nav>
</div>
</div>
<div class="docs-content">
<div class="left-space">
<p>In this page</p>
<ul class="left-nav">
<li>Item1</li>
<li>Item2</li>
</ul>
</div>
<div class="right-space">
<!-------------------------------------------------------------------------------------------------------------------------------->
<h1 id="1">Main Title</h1>
<h3>Subtitle</h3>
<p>
Paragraph
With code:
<pre><code class="pyton">print("Hello world")
x=10
print(x)</code></pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum saepe expedita commodi consectetur ipsum. Deleniti delectus, quas voluptatibus eum dolore accusamus aliquid voluptate a error sunt dolores mollitia. At, mollitia.
A nulla eligendi provident exercitationem! Minus perspiciatis eum vel similique, ducimus illum qui sint magnam, asperiores adipisci nesciunt in, rem assumenda repellendus! Blanditiis corporis, quidem dolore expedita consectetur aliquid eius!
Similique, provident illo nihil, unde iure perspiciatis corrupti, eius ad sint consequuntur asperiores error harum? Laborum beatae in dolorem ullam itaque quos deleniti quae debitis, magnam autem ipsa deserunt? Illo!
Nesciunt perspiciatis a corporis necessitatibus sed asperiores voluptas error saepe tempora rem voluptatibus quae ipsa molestias soluta nostrum, non sunt accusamus fuga numquam ut illo dicta! Deleniti magni doloribus ea.
Odio, quas fugiat harum eos animi suscipit dolorum ipsam aliquid perspiciatis, vitae quam assumenda soluta voluptas delectus? Placeat, repellat. Voluptatibus sint blanditiis explicabo similique, exercitationem et tempora consequatur ex asperiores!
Animi vel dignissimos inventore eligendi quisquam alias vitae earum itaque neque fugiat rem amet culpa atque delectus quod, tenetur praesentium in autem porro quam qui reprehenderit! Corrupti soluta qui illum.
Ut at sint, eius aperiam vitae, magni vel harum distinctio excepturi iusto laborum itaque deserunt cumque eaque. Qui ex quas blanditiis repellat, temporibus ab inventore perferendis sapiente cum quo laborum?
Sunt tempora possimus culpa odit numquam, nobis commodi quod, vero repellat autem nostrum laboriosam. Consequuntur hic excepturi in amet unde voluptatibus a? Optio officia obcaecati voluptatem quod dolores minus doloribus?
Nihil alias nesciunt veniam modi similique blanditiis officiis, ratione obcaecati dolores aliquid quos iusto ducimus excepturi voluptas expedita, laboriosam corrupti illum quibusdam doloribus quaerat? Quaerat neque quia impedit atque vel.
Veritatis placeat officia maiores inventore laborum illo enim vitae, ratione, dolorem esse est! Omnis, libero facere eaque vitae fuga ullam cumque consequatur porro ab recusandae, soluta facilis? Quasi, rem voluptate?
Soluta eius molestiae nemo, maiores dolore ratione placeat! Esse, doloribus tempora sint sed rem reiciendis corrupti. Sit mollitia veniam tempora iusto ipsa voluptate quod, eaque veritatis quasi iste hic quas!
Corporis pariatur, esse ipsum labore alias accusamus voluptatem veritatis ipsa possimus deserunt veniam deleniti facilis aliquam magni quidem, eligendi tempore ab dicta amet optio nesciunt provident voluptas eaque? Inventore, ducimus.
Numquam, deserunt voluptatibus veritatis est omnis ducimus ab tempora cupiditate fuga deleniti officiis velit molestiae facilis eveniet debitis, reprehenderit iure repellendus impedit animi dolorum culpa nostrum rerum illo! Quidem, soluta.
Corrupti sapiente eius necessitatibus nostrum incidunt, modi, in quae accusantium totam minima ducimus, aperiam nulla velit eos. Adipisci dignissimos eveniet, quia, voluptatibus unde repellat aperiam doloremque mollitia fugiat minus dolor.
Maxime sequi pariatur, quod, esse animi placeat quibusdam excepturi doloremque consectetur culpa commodi enim. Autem voluptas quasi excepturi natus laborum quas ad voluptatibus adipisci repellendus quia, ratione minus cupiditate itaque.
Voluptate repellendus id molestiae ipsam impedit aspernatur facere magni. Eveniet aut praesentium officiis ea fugit tenetur pariatur, veritatis deserunt! Beatae, vero odit. Aliquam delectus ipsam maxime repellat tenetur, doloribus iure.
Aspernatur vel suscipit sequi enim recusandae ratione perspiciatis, facere, fugiat incidunt, error iusto quibusdam consectetur eos. Quasi vel neque aperiam aliquid rerum, facilis cupiditate deleniti voluptate modi, nihil sunt distinctio.
</p>
<h1 id="2">Second Title</h1>
<p>
Id totam deleniti sit, magni praesentium velit voluptatum, molestias, recusandae nulla ratione quae blanditiis numquam! Sapiente nam unde quidem. Id dolor libero ipsam dolore incidunt corrupti omnis dolorem! Tempora, impedit?
Officia at cum libero unde ipsa veritatis obcaecati est quod delectus sequi voluptatem veniam consequatur sit nobis eveniet eos ab dolore earum vero, molestias nam! Ducimus optio harum necessitatibus debitis.
Dignissimos quo aspernatur iste, itaque vel voluptates fugiat dolorem maiores assumenda repellat accusamus, illo praesentium tempora aliquid sed doloribus provident, optio quia nihil. Consectetur optio quisquam eum deserunt nostrum delectus.
At libero odio suscipit quae veniam possimus dolores eum praesentium aliquid illo, voluptates similique, dignissimos, magni alias debitis harum nemo. Officia, vel! Quis minima, nesciunt eos ipsum rem quos sed!
Ad possimus error, iste facere aut voluptatem odit, voluptatum ea eos fugiat, quas cupiditate? Dolores architecto doloribus repudiandae necessitatibus repellendus officia tenetur perspiciatis, modi fugiat aliquam, tempora unde maiores doloremque.
A, nam id et adipisci nostrum natus eligendi ducimus est quos sed eveniet? Nobis saepe placeat optio natus, atque est eius nesciunt, quaerat deleniti velit consequatur laborum molestiae error dolore?
Ducimus, quam nostrum ipsam ex dolores maxime impedit corrupti deserunt dolor quod similique. Sed nihil explicabo laudantium a aut provident, ex pariatur aspernatur minus cupiditate saepe accusamus, expedita impedit iste!
Vero vel iure, quaerat unde dolore tempora molestias eum facilis cumque consequuntur non totam aperiam cum voluptas qui nihil incidunt fugiat aliquid! Ipsum accusantium vero quod, fugiat soluta illum recusandae.
Facere veniam ut est, tempora suscipit temporibus esse exercitationem reiciendis ipsam eaque dolorum, maiores dolorem ducimus voluptatem accusantium. Dicta dolorem reiciendis rerum explicabo sint pariatur illum tenetur. Laborum, tenetur repellat!
Inventore, optio quas necessitatibus consectetur atque temporibus porro dolorem dicta incidunt eaque et unde animi! Rem eaque unde placeat accusantium repudiandae blanditiis, quod voluptate natus fuga, nisi sit adipisci totam?
Explicabo consequuntur tempore dignissimos, debitis odit mollitia incidunt atque animi esse facere, ipsa ducimus repellendus deserunt laboriosam aliquam. Autem repudiandae voluptate dicta, reiciendis quos iusto voluptates ipsum rem iure incidunt!
</p>
<!-------------------------------------------------------------------------------------------------------------------------------->
</div>
</div>
</body>
</html>
Works as expected for me. If you are wondering why the inner scroll isn't smooth, you need to set the scroll behavior on the inner container as well. Add the appropriate css.
.right-space {
scroll-behavior: smooth;
}

You will want to add smooth to the .right-space so when full screen you get smooth scrolling.
.docs-content .right-space {
margin: 2em auto;
width: 90%;
background: white;
overflow-y: scroll;
padding: 1em;
height: 100vh;
scroll-behavior: smooth;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
-webkit-animation: transitionRight 1s;
animation: transitionRight 1s;
}

Related

Portfolio NavBar : HTML, CSS, FLEXBOX

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;
}

Animate size of element using CSS

I'm trying to animate the size of .folder because otherwise the background stays.
- Run the code snippet. It will explain the problem.
I don't want set fixed values:
.enabled > .folder-body {
height: 100px;
}
:not(.enabled) > .folder-body {
height: 0px;
}
I tried using transform but i couldn't get it to work.
(Styled Version)
const folder = document.querySelector('#folder');
const header = document.querySelector('#header');
header.addEventListener('click', () => {
folder.classList.toggle('enabled');
});
p {
margin: 0;
}
.folder {
border: 2px solid black;
overflow: hidden;
}
.folder-header {
display: flex;
align-items: center;
color: white;
background-color: black;
}
.folder-header>svg {
height: 15px;
fill: white;
transition: all 0.2s ease-out;
}
.enabled>.folder-header>svg {
transform: rotateZ(90deg);
}
.folder-body {
transition: all 0.2s ease-out;
}
.enabled>.folder-body {
transform: none;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
visibility: visible;
}
:not(.enabled)>.folder-body {
transform: translateY(-100%);
clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
visibility: hidden;
}
<div class="folder disabled" id="folder">
<div class="folder-header" id="header">
<svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="m3 0 17 10-17 10z" />
</svg>
<h2>Menu</h2>
</div>
<p class="folder-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur fugit porro aliquid hic! Reiciendis a possimus esse aliquid magni optio sapiente in labore reprehenderit nostrum ipsum odit eveniet magnam necessitatibus aliquam, minima est? Ipsum quae
sunt eum exercitationem dolorem animi expedita est quidem sapiente, eos ducimus iure praesentium quo, eaque possimus perspiciatis maxime doloribus hic beatae sit libero? Aperiam eveniet saepe recusandae repellendus magni similique delectus cum, inventore
veniam! Exercitationem, beatae? Temporibus libero quam, velit eligendi quo voluptatibus asperiores iusto vero adipisci fugit nesciunt. Minima magnam incidunt, ad illo minus commodi ducimus esse tenetur adipisci similique harum optio aliquam delectus.
</p>
</div>

Example with height: 0 to height: auto.
const folder = document.querySelector('#folder');
const header = document.querySelector('#header');
header.addEventListener('click', () => {
folder.classList.toggle('enabled');
});
p {
margin: 0;
}
.folder {
overflow: hidden;
}
.folder-header {
display: flex;
align-items: center;
color: white;
background-color: black;
padding: 0 10px;
}
.folder-header>svg {
height: 15px;
fill: white;
transition: all 0.2s ease-out;
}
.enabled>.folder-header>svg {
transform: rotateZ(90deg);
}
.folder-body {
transition: all 0.2s ease-out;
height: 0;
border: 2px solid black;
box-sizing: border-box;
padding: 0px;
}
.enabled>.folder-body {
padding: 10px;
}
.enabled>.folder-body {
transform: none;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
visibility: visible;
height: auto;
}
:not(.enabled)>.folder-body {
transform: translateY(-100%);
clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
visibility: hidden;
}
<div class="folder disabled" id="folder">
<div class="folder-header" id="header">
<svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="m3 0 17 10-17 10z" />
</svg>
<h2>Menu</h2>
</div>
<p class="folder-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur fugit porro aliquid hic! Reiciendis a possimus esse aliquid magni optio sapiente in labore reprehenderit nostrum ipsum odit eveniet magnam necessitatibus aliquam, minima est? Ipsum quae
sunt eum exercitationem dolorem animi expedita est quidem sapiente, eos ducimus iure praesentium quo, eaque possimus perspiciatis maxime doloribus hic beatae sit libero? Aperiam eveniet saepe recusandae repellendus magni similique delectus cum, inventore
veniam! Exercitationem, beatae? Temporibus libero quam, velit eligendi quo voluptatibus asperiores iusto vero adipisci fugit nesciunt. Minima magnam incidunt, ad illo minus commodi ducimus esse tenetur adipisci similique harum optio aliquam delectus.
</p>
</div>

You can do it by setting the max-height of the element to something bigger than your box will ever get.
Then you can close it by setting max-height: 0.
I didn't think of this. Here's a CSS Tricks article and a post on dev.to.
const folder = document.querySelector('#folder');
const header = document.querySelector('#header');
header.addEventListener('click', () => {
folder.classList.toggle('enabled');
});
p {
margin: 0;
}
.folder {
border: 2px solid black;
overflow: hidden;
}
.folder-header {
display: flex;
align-items: center;
color: white;
background-color: black;
}
.folder-header>svg {
height: 15px;
fill: white;
transition: all 0.2s ease-out;
}
.enabled>.folder-header>svg {
transform: rotateZ(90deg);
}
.folder-body {
max-height: 500px;
transition: all 0.2s ease-out;
}
.enabled>.folder-body {
max-height: 500px;
}
:not(.enabled)>.folder-body {
max-height: 0;
}
<div class="folder disabled" id="folder">
<div class="folder-header" id="header">
<svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="m3 0 17 10-17 10z" />
</svg>
<h2>Menu</h2>
</div>
<p class="folder-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur fugit porro aliquid hic! Reiciendis a possimus esse aliquid magni optio sapiente in labore reprehenderit nostrum ipsum odit eveniet magnam necessitatibus aliquam, minima est? Ipsum quae
sunt eum exercitationem dolorem animi expedita est quidem sapiente, eos ducimus iure praesentium quo, eaque possimus perspiciatis maxime doloribus hic beatae sit libero? Aperiam eveniet saepe recusandae repellendus magni similique delectus cum, inventore
veniam! Exercitationem, beatae? Temporibus libero quam, velit eligendi quo voluptatibus asperiores iusto vero adipisci fugit nesciunt. Minima magnam incidunt, ad illo minus commodi ducimus esse tenetur adipisci similique harum optio aliquam delectus.
</p>
</div>

Div with a lot of text goes out of page upon resizing

I am trying to make a simple responsive "about" page.
Everything works till I resize the browser to a smaller window.
HTML
<div id="content">
<div id="area-container">
<h1>about</h1>
<div id="textarea">
<p>My name is...[lorem200words]</p>
</div>
</div>
</div>
CSS
body {
margin: 0 auto;
overflow: hidden;
font-family: 'Share Tech Mono', monospace;
}
#content {
width: 100%;
height: 2457px;
background-image: url('../images/wallpaper.jpg');
}
#area-container {
display:inline-block;
margin-top: 50vh;
margin-left: 50vw;
transform: translate(-50%, -60%);
}
#media screen and (max-width:800px) {
body {
overflow-y: scroll;
}
#content {
width: 100%;
height: 100%;
background-image: url('../images/connected.png');
}
}
https://jsfiddle.net/a4uaquyp/3/
The problem is that the whole textarea div seems to jump out of the browser, when I add the overflow to the body it won't let me scroll up enough.
There's also for some reason a lot of excess space below.
I tried using media querys to somehow push the #content down a bit with margin-top and vw/vh, I can't really think of anything else.

The problem is your use of transform: translate(-50%, -60%), in combination with your margin-top: 50vh and margin-left: 50vw. While this offsets the content, it will overflow it if there is too much to display.
Instead, if you want to center a lot of content, I would recommend flexbox. This allows you to achieve your desired result with only a few lines of code:
#content {
display: flex;
align-items: center;
justify-content: center;
}
#area-container {
max-width: 50%;
}
This can be seen in the following:
#import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');
body {
margin: 0 auto;
overflow: hidden;
font-family: 'Share Tech Mono', monospace;
}
#content {
width: 100%;
background-image: url('../images/wallpaper.jpg');
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px; /* Just to give space at the bottom */
}
#area-container {
max-width: 50%;
}
#textarea {
background-color: #fff;
box-shadow: 0 0 3em #ccc;
border-radius: 10px;
padding: 10px;
}
#area-container h1 {
text-align: center;
text-transform: uppercase;
font-size: 5vw;
}
#area-container h1:before,
#area-container h1:after {
content: '-';
font-weight: normal;
}
#media screen and (max-width:800px) {
body {
overflow-y: scroll;
}
#content {
width: 100%;
height: 100%;
background-image: url('../images/connected.png');
}
#area-container h1 {
font-size: 40px;
}
}
<body>
<div id="content">
<div id="area-container">
<h1>about</h1>
<div id="textarea">
<p>y name is... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo odit repudiandae veritatis hic facere non aperiam sunt dolor, ut enim? Sunt tempora et saepe quae, optio fugiat, eaque corrupti dignissimos modi tenetur sint corporis
dolore. Harum sunt eligendi, facilis, quos obcaecati consequatur earum, qui molestiae ducimus inventore optio. Minus quas sed, fugit fuga culpa neque magni quisquam doloremque tempora ad, et quia possimus voluptatibus enim iusto esse omnis recusandae
in eos provident nobis totam aliquid. Iste fugit tenetur, odio voluptates impedit veritatis reiciendis. Enim eaque quod repudiandae velit eum, quo commodi, odio quasi quos laboriosam iusto dolores laborum sapiente tenetur nihil sunt, nam nostrum
at accusamus id facere magnam! Quibusdam sint, velit similique harum alias neque doloremque labore iste officia repellat quae dolorum suscipit ad nostrum eaque quisquam, amet voluptatibus, laborum sit quaerat dolorem sunt laudantium. Nam necessitatibus
repellendus ipsum officia nulla commodi. Eveniet amet fuga, dolores voluptas nemo impedit laudantium facere, eum iste officiis perspiciatis. Quae ipsa eligendi dolor laborum optio ipsam commodi temporibus sequi, adipisci nobis facere, iste deserunt
architecto rem odit ullam, tenetur fuga veniam. Sed maiores libero odio nostrum officia, dolores expedita quisquam asperiores eligendi ad soluta incidunt earum, vitae, omnis esse voluptatum perferendis ab commodi.</p>
</div>
</div>
</div>
</body>
Also note that you don't probably want to restrict the height of #content. I've removed the height: 2457px from my above snippet.

parent's relative position grows to fit the child absolute position height

How can I set the height of a parent (relative position) to height of the it's children?
Take a look at this pen to see it in action.
blockquote {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
color: #edf0f9;
overflow: hidden;
}
blockquote img {
width: 5.5rem;
height: 5.5rem;
border-radius: 50%;
position: absolute;
top: 0;
right: 1rem;
z-index: 2;
}
blockquote .name-block {
padding: 0.1rem 2rem 0.1rem 0.5rem;
background-color: #6e7480;
font-size: 0.8rem;
position: absolute;
top: 2rem;
right: 5rem;
z-index: 1;
}
blockquote .pos-block {
padding: 0.1rem 3rem 0.1rem 0.5rem;
background-color: #6e7480;
font-size: 0.8rem;
position: absolute;
top: 3.6rem;
right: 4rem;
z-index: 1;
}
blockquote .txt-block {
background-color: #2b2d32;
padding: 5rem 1rem 1rem 1.8rem;
position: absolute;
top: 1.5rem;
right: 0;
}
blockquote .txt-block:before {
content: '';
position: absolute;
left: 1rem;
top: 4.5rem;
border-left: 2px solid #6e7480;
height: calc(100% - 5rem);
}
<blockquote>
<img src="http://7108-presscdn-0-78.pagely.netdna-cdn.com/wp-content/uploads/2013/09/person-to-person-business.jpg" />
<span class="name-block">John Doe</span>
<span class="pos-block">A mannager</span>
<div class="txt-block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate iste ipsam facere reprehenderit iure odio voluptatem quod voluptatibus natus officiis. Consequatur eius architecto deleniti beatae sapiente laboriosam tempora, deserunt officia asperiores
incidunt ea accusantium debitis blanditiis nesciunt ex minus ipsam nobis unde in distinctio, vero alias magni dolorum dolore? Debitis non aspernatur quis minus laboriosam. Voluptates maxime consequatur doloremque accusantium esse aperiam, voluptate
voluptas officiis perspiciatis, minus sed ab voluptatum nisi cumque sapiente illo culpa a magnam ducimus omnis animi cum dignissimos? Vero quaerat quisquam ipsam libero porro nulla fugit repellat, accusantium, quidem, laudantium perspiciatis cupiditate
vel dolore aliquid sapiente rem dolorem voluptatem architecto minus facilis eos expedita alias nesciunt dolores. Eum eos architecto, eveniet illo, sit doloribus, debitis possimus non placeat quibusdam odio quidem ab dicta dolorum blanditiis accusamus.
Perferendis veniam officiis rem, ex iusto nesciunt! Sit incidunt saepe ab velit, adipisci totam rerum nostrum fugit, architecto deserunt ea!
</div>
</blockquote>
I set the blockquote element position to relative and set the child of its to absolute and when the the overflow of the parent set to hidden the height of blockquote automatically set to 0 and the content just show when overflow: visible or height strictly set.

When you position an element absolute, it is taken out of the normal flow and so blockquote (which is your parent relative element) will have zero height.
Now if if you use overflow: hidden on blockquote, it will hide everything.
So the best option is to put something on the normal flow and that would be txt-block - remove absolute positioning and give a margin-top to get the desired effect - see demo below:
blockquote {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
color: #edf0f9;
overflow: hidden;
}
blockquote img {
width: 5.5rem;
height: 5.5rem;
border-radius: 50%;
position: absolute;
top: 0;
right: 1rem;
z-index: 2;
}
blockquote .name-block {
padding: 0.1rem 2rem 0.1rem 0.5rem;
background-color: #6e7480;
font-size: 0.8rem;
position: absolute;
top: 2rem;
right: 5rem;
z-index: 1;
}
blockquote .pos-block {
padding: 0.1rem 3rem 0.1rem 0.5rem;
background-color: #6e7480;
font-size: 0.8rem;
position: absolute;
top: 3.6rem;
right: 4rem;
z-index: 1;
}
blockquote .txt-block {
background-color: #2b2d32;
padding: 5rem 1rem 1rem 1.8rem;
margin-top: 1.5rem;
}
blockquote .txt-block:before {
content: '';
position: absolute;
left: 1rem;
top: 4.5rem;
border-left: 1px solid #6e7480;
height: calc(100% - 5rem);
}
<blockquote>
<img src="http://7108-presscdn-0-78.pagely.netdna-cdn.com/wp-content/uploads/2013/09/person-to-person-business.jpg" />
<span class="name-block">John Doe</span>
<span class="pos-block">A mannager</span>
<div class="txt-block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate iste ipsam facere reprehenderit iure odio voluptatem quod voluptatibus natus officiis. Consequatur eius architecto deleniti beatae sapiente laboriosam tempora, deserunt officia asperiores
incidunt ea accusantium debitis blanditiis nesciunt ex minus ipsam nobis unde in distinctio, vero alias magni dolorum dolore? Debitis non aspernatur quis minus laboriosam. Voluptates maxime consequatur doloremque accusantium esse aperiam, voluptate
voluptas officiis perspiciatis, minus sed ab voluptatum nisi cumque sapiente illo culpa a magnam ducimus omnis animi cum dignissimos? Vero quaerat quisquam ipsam libero porro nulla fugit repellat, accusantium, quidem, laudantium perspiciatis cupiditate
vel dolore aliquid sapiente rem dolorem voluptatem architecto minus facilis eos expedita alias nesciunt dolores. Eum eos architecto, eveniet illo, sit doloribus, debitis possimus non placeat quibusdam odio quidem ab dicta dolorum blanditiis accusamus.
Perferendis veniam officiis rem, ex iusto nesciunt! Sit incidunt saepe ab velit, adipisci totam rerum nostrum fugit, architecto deserunt ea!
</div>
</blockquote>
Let me know your thoughts on this, thanks!

You have set the min-height or height.
blockquote {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
color: #edf0f9;
overflow: hidden;
min-height: 100px;
}
http://codepen.io/hemedani/pen/vyNXJL

Arrows from point to point

I have a PSD which I have to convert to html. I have a problem with some elements, to be more precise I have no idea how to create it, furthermore I don't know how to name it to find examples in google. Looking for your advices. Those arrows should be responsive(become longer or shorter)

I would give the background the dashed lines. Then I would position the icons along with their arrow heads at the top, bottom, and middle using css. Then as the element grows and shrinks the icons move with the sizing and cover the dashed lines in the background.
Here, I got you started...
.container {
box-sizing: border-box;
width: 80%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.top-dash {
position: relative;
width: 100%;
height: 30px;
margin-bottom: 1em;
background-color: black;
display: flex;
align-items: center;
justify-content: space-between;
}
.top-dash:before {
content: "";
position: absolute;
left: 0;
top: 13px;
width: 100%;
border-top: 5px dashed orange;
}
[class*="word"] {
display: block;
padding-right: 1em;
background-color: black;
color: orange;
font-size: 18px;
font-weight: bold;
z-index: 5;
}
[class*="word"]:first-child {
padding-left: 1em;
}
[class*="word"]:nth-child(n+2):before {
content: ">";
padding-right: 1em;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0 2em;
border-left: 60px solid blue;
}
.side-dash {
position: absolute;
left: -60px;
top: 0;
width: 60px;
height: 100%;
overflow: hidden;
display: flex;
}
.side-dash:before {
content: "";
position: absolute;
left: 28px;
top: 0;
height: 100%;
border-left: 5px dashed white;
}
<div class="container">
<div class="top-dash">
<span class="word-left">ONE</span>
<span class="word-mid">TWO</span>
<span class="word-right">THREE</span>
</div>
<div class="content">
<div class="side-dash">
<span class="icon-top"></span>
<span class="icon-mid"></span>
<span class="icon-bot"></span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, cupiditate, explicabo! Voluptatibus placeat quod magnam soluta, fuga molestiae consectetur doloribus distinctio ipsum voluptas labore delectus reprehenderit rem voluptate, beatae nesciunt.</p>
<p>Nisi excepturi nobis ipsam perferendis nemo ipsa! Aspernatur quaerat ad, harum sapiente? Adipisci, ea. Aperiam exercitationem unde reiciendis obcaecati dolorem sit vitae animi, ut at quisquam corporis ratione voluptatum modi!</p>
<p>Assumenda explicabo voluptatum ea porro unde quo at praesentium temporibus quae optio, laudantium ab minus vero quas, repellat nihil. Laudantium, facere. Tempora adipisci earum voluptatem deserunt atque eos fugiat debitis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, cupiditate, explicabo! Voluptatibus placeat quod magnam soluta, fuga molestiae consectetur doloribus distinctio ipsum voluptas labore delectus reprehenderit rem voluptate, beatae nesciunt.</p>
<p>Nisi excepturi nobis ipsam perferendis nemo ipsa! Aspernatur quaerat ad, harum sapiente? Adipisci, ea. Aperiam exercitationem unde reiciendis obcaecati dolorem sit vitae animi, ut at quisquam corporis ratione voluptatum modi!</p>
<p>Assumenda explicabo voluptatum ea porro unde quo at praesentium temporibus quae optio, laudantium ab minus vero quas, repellat nihil. Laudantium, facere. Tempora adipisci earum voluptatem deserunt atque eos fugiat debitis.</p>
</div>
</div>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

CSS Smooth scrolling property not working - html

Related

Portfolio NavBar : HTML, CSS, FLEXBOX

Animate size of element using CSS

Div with a lot of text goes out of page upon resizing

parent's relative position grows to fit the child absolute position height

Arrows from point to point

Categories

Resources