I have a div with a plain background that turns into an image on hover. I would like a transition such that the fade effect isn't instant but I can't seem to make this work. I can make it work if i add an opacity: 0.5 to the .split.left:hover but then the text color is also affected. I would prefer if it was only the background that changed on hover.
I am wondering if this is because I am using a Safari browser or if I am simply implementing it wrong?
.split.left {
left: 0;
background: linear-gradient( rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 1.0));
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
border-right: 1px solid #f3f3f3;
}
.split.left:hover {
left: 0;
background: linear-gradient( rgba(34, 47, 61, 0.5), rgba(34, 47, 61, 0.5)), url('../images/img/split-left2.jpg') center center no-repeat;
}
<section class="split-menu">
<div class="split-container">
<div class="split left">
<h1>Lorem Ipsum</h1>
<div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim neque voluptatibus, modi rerum dolor temporibus architecto sapiente ipsam, ea quae ducimus officiis aliquid odio perspiciatis nisi vitae ad tenetur iste quas suscipit! Aut, nisi corrupti
ducimus magni cumque, illum provident, esse obcaecati illo doloremque, sunt necessitatibus. Laborum pariatur neque sequi natus, ducimus nisi obcaecati necessitatibus magnam perferendis! Ex alias adipisci dolorum nostrum vel reprehenderit accusamus
eum earum consequatur optio illum consectetur itaque, aut minus doloremque ducimus ad perferendis, inventore magnam rerum quaerat recusandae aspernatur harum. Porro debitis, reiciendis facere voluptas eveniet explicabo libero autem pariatur doloremque
tempora quasi modi quis.</div>
Read More
</div>
<div class="split right">
<h1>Lorem Ipsum</h1>
<div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus nihil officia a accusamus nulla voluptas mollitia nostrum nesciunt, ducimus quam saepe vitae dolore at consequatur deleniti architecto itaque nobis temporibus adipisci hic. Harum
blanditiis necessitatibus dolore dolorem eius inventore, voluptatibus minima adipisci nesciunt fuga ipsum esse, quasi reiciendis tempora. Similique doloremque odio, eligendi facilis, tenetur, nobis velit quod quasi, sit mollitia aliquam deleniti
ipsum quo illo! Impedit minima tenetur eveniet earum vitae dicta ut odio eius eos, temporibus sint dignissimos quia, molestias, voluptatum. Repellat cum quaerat perspiciatis, a dolores aliquid autem vitae sit, minima quod odit nostrum maxime in
ad.</div>
Read More
</div>
</div>
</section>
I created a working fiddle for you over here.
I made image its own div with position: absolute, and then made its container and text inside position: relative.
.split.left {
position: relative;
border-right: 1px solid #f3f3f3;
}
.split.left .image {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient( rgba(34, 47, 61, 0.5), rgba(34, 47, 61, 0.5)), url('https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg') center center no-repeat;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.split.left:hover .image {
opacity: 1;
}
h1,
.split-menu-text,
a.split-button {
position: relative;
z-index: 1;
}
<section class="split-menu">
<div class="split-container">
<div class="split left">
<h1>Lorem Ipsum</h1>
<div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim neque voluptatibus, modi rerum dolor temporibus architecto sapiente ipsam, ea quae ducimus officiis aliquid odio perspiciatis nisi vitae ad tenetur iste quas suscipit! Aut, nisi corrupti
ducimus magni cumque, illum provident, esse obcaecati illo doloremque, sunt necessitatibus. Laborum pariatur neque sequi natus, ducimus nisi obcaecati necessitatibus magnam perferendis! Ex alias adipisci dolorum nostrum vel reprehenderit accusamus
eum earum consequatur optio illum consectetur itaque, aut minus doloremque ducimus ad perferendis, inventore magnam rerum quaerat recusandae aspernatur harum. Porro debitis, reiciendis facere voluptas eveniet explicabo libero autem pariatur doloremque
tempora quasi modi quis.</div>
Read More
<div class="image"></div>
</div>
<div class="split right">
<h1>Lorem Ipsum</h1>
<div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus nihil officia a accusamus nulla voluptas mollitia nostrum nesciunt, ducimus quam saepe vitae dolore at consequatur deleniti architecto itaque nobis temporibus adipisci hic. Harum
blanditiis necessitatibus dolore dolorem eius inventore, voluptatibus minima adipisci nesciunt fuga ipsum esse, quasi reiciendis tempora. Similique doloremque odio, eligendi facilis, tenetur, nobis velit quod quasi, sit mollitia aliquam deleniti
ipsum quo illo! Impedit minima tenetur eveniet earum vitae dicta ut odio eius eos, temporibus sint dignissimos quia, molestias, voluptatum. Repellat cum quaerat perspiciatis, a dolores aliquid autem vitae sit, minima quod odit nostrum maxime in
ad.</div>
Read More
</div>
</div>
</section>
When using opacity, in your case it would affect the content of .split.left as well.
An option here is to use a pseudo element for the gradient/background image, and you can easily fade it in/out w/o affecting the rest of the content.
It also keeps things clean, and no need for extra markup.
Stack snippet
.split.left {
position: relative ;
border-right: 1px solid #f3f3f3;
}
.split.left > * {
position: relative ; /* this will avoid using z-index on pseudo */
}
.split.left::before {
content: '';
opacity: 0;
transition: opacity 1s linear;
position: absolute;
left: 0; top: 0;
right: 0; bottom: 0;
background: linear-gradient(
rgba(34, 47, 61, 0.1),
rgba(34, 47, 61, 0.5)),
url('http://placehold.it/300x100/faa/faa') center center no-repeat;
}
.split.left:hover::before {
opacity: 1;
}
<section class="split-menu">
<div class="split-container">
<div class="split left">
<h1>Lorem Ipsum</h1>
<div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim neque voluptatibus, modi rerum dolor temporibus architecto sapiente ipsam, ea quae ducimus officiis aliquid odio perspiciatis nisi vitae ad tenetur iste quas suscipit! Aut, nisi corrupti ducimus magni cumque, illum provident, esse obcaecati illo doloremque, sunt necessitatibus. Laborum pariatur neque sequi natus, ducimus nisi obcaecati necessitatibus magnam perferendis! Ex alias adipisci dolorum nostrum vel reprehenderit accusamus eum earum consequatur optio illum consectetur itaque, aut minus doloremque ducimus ad perferendis, inventore magnam rerum quaerat recusandae aspernatur harum. Porro debitis, reiciendis facere voluptas eveniet explicabo libero autem pariatur doloremque tempora quasi modi quis.</div>
Read More
</div>
<div class="split right">
<h1>Lorem Ipsum</h1>
<div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus nihil officia a accusamus nulla voluptas mollitia nostrum nesciunt, ducimus quam saepe vitae dolore at consequatur deleniti architecto itaque nobis temporibus adipisci hic. Harum blanditiis necessitatibus dolore dolorem eius inventore, voluptatibus minima adipisci nesciunt fuga ipsum esse, quasi reiciendis tempora. Similique doloremque odio, eligendi facilis, tenetur, nobis velit quod quasi, sit mollitia aliquam deleniti ipsum quo illo! Impedit minima tenetur eveniet earum vitae dicta ut odio eius eos, temporibus sint dignissimos quia, molestias, voluptatum. Repellat cum quaerat perspiciatis, a dolores aliquid autem vitae sit, minima quod odit nostrum maxime in ad.</div>
Read More
</div>
</div>
</section>
This one with a delay when hovered, before the background shows.
Stack snippet
.split.left {
position: relative ;
border-right: 1px solid #f3f3f3;
}
.split.left > * {
position: relative ;
}
.split.left::before {
content: '';
opacity: 0;
transition: opacity 1s 0s linear;
position: absolute;
left: 0; top: 0;
right: 0; bottom: 0;
background: linear-gradient(
rgba(34, 47, 61, 0.1),
rgba(34, 47, 61, 0.5)),
url('http://placehold.it/300x100/faa/faa') center center no-repeat;
}
.split.left:hover::before {
opacity: 1;
transition: opacity 1s .5s linear;
}
<section class="split-menu">
<div class="split-container">
<div class="split left">
<h1>Lorem Ipsum</h1>
<div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim neque voluptatibus, modi rerum dolor temporibus architecto sapiente ipsam, ea quae ducimus officiis aliquid odio perspiciatis nisi vitae ad tenetur iste quas suscipit! Aut, nisi corrupti ducimus magni cumque, illum provident, esse obcaecati illo doloremque, sunt necessitatibus. Laborum pariatur neque sequi natus, ducimus nisi obcaecati necessitatibus magnam perferendis! Ex alias adipisci dolorum nostrum vel reprehenderit accusamus eum earum consequatur optio illum consectetur itaque, aut minus doloremque ducimus ad perferendis, inventore magnam rerum quaerat recusandae aspernatur harum. Porro debitis, reiciendis facere voluptas eveniet explicabo libero autem pariatur doloremque tempora quasi modi quis.</div>
Read More
</div>
<div class="split right">
<h1>Lorem Ipsum</h1>
<div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus nihil officia a accusamus nulla voluptas mollitia nostrum nesciunt, ducimus quam saepe vitae dolore at consequatur deleniti architecto itaque nobis temporibus adipisci hic. Harum blanditiis necessitatibus dolore dolorem eius inventore, voluptatibus minima adipisci nesciunt fuga ipsum esse, quasi reiciendis tempora. Similique doloremque odio, eligendi facilis, tenetur, nobis velit quod quasi, sit mollitia aliquam deleniti ipsum quo illo! Impedit minima tenetur eveniet earum vitae dicta ut odio eius eos, temporibus sint dignissimos quia, molestias, voluptatum. Repellat cum quaerat perspiciatis, a dolores aliquid autem vitae sit, minima quod odit nostrum maxime in ad.</div>
Read More
</div>
</div>
</section>
You can use transition delay but you may need you break background into image and color separately.
.split.left {
left: 0;
transition: 0s background-color;
-moz-transition: 0s background-color;
-webkit-transition: 0s background-color;
border-right: 1px solid #f3f3f3;
}
.split.left:hover {
left: 0;
background-color: rgba(34, 47, 61, 0.5);
background-image: url('../images/img/split-left2.jpg') center center no-repeat;
transition-delay: 1s;
}
<section class="split-menu">
<div class="split-container">
<div class="split left">
<h1>Lorem Ipsum</h1>
<div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim neque voluptatibus, modi rerum dolor temporibus architecto sapiente ipsam, ea quae ducimus officiis aliquid odio perspiciatis nisi vitae ad tenetur iste quas suscipit! Aut, nisi corrupti
ducimus magni cumque, illum provident, esse obcaecati illo doloremque, sunt necessitatibus. Laborum pariatur neque sequi natus, ducimus nisi obcaecati necessitatibus magnam perferendis! Ex alias adipisci dolorum nostrum vel reprehenderit accusamus
eum earum consequatur optio illum consectetur itaque, aut minus doloremque ducimus ad perferendis, inventore magnam rerum quaerat recusandae aspernatur harum. Porro debitis, reiciendis facere voluptas eveniet explicabo libero autem pariatur doloremque
tempora quasi modi quis.</div>
Read More
</div>
<div class="split right">
<h1>Lorem Ipsum</h1>
<div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus nihil officia a accusamus nulla voluptas mollitia nostrum nesciunt, ducimus quam saepe vitae dolore at consequatur deleniti architecto itaque nobis temporibus adipisci hic. Harum
blanditiis necessitatibus dolore dolorem eius inventore, voluptatibus minima adipisci nesciunt fuga ipsum esse, quasi reiciendis tempora. Similique doloremque odio, eligendi facilis, tenetur, nobis velit quod quasi, sit mollitia aliquam deleniti
ipsum quo illo! Impedit minima tenetur eveniet earum vitae dicta ut odio eius eos, temporibus sint dignissimos quia, molestias, voluptatum. Repellat cum quaerat perspiciatis, a dolores aliquid autem vitae sit, minima quod odit nostrum maxime in
ad.</div>
Read More
</div>
</div>
</section>
Hope this helps
Related
❌ this isn't what I want, since it didn't stick to the end, and didn't stay fixed.
(the pseudoelement is a gradient of white and transparent)
✅ this is what I want, and is correct only at the start when I never scrolled :(
(the pseudoelement is a gradient of white and transparent)
I tried absolute, fixed, and also sticky... nothing helps but absolute is correct only at the start when we didn't scroll, but when scrolling the ::before will start to follow the scrollbar which isn't what I want... I want that the ::before staying at the bottom every time (fixed doesn't help because it will go outside the <div> and follow maybe the <body>)
I can't change the structure, since I need to use ::before or ::after, but not create a new div, but I can use whatever CSS you suggest to me
I thought is a simple problem since fixed can solve it, but turn out is very hard, and fixed never work :( (I tried also to see on StackOverflow like 10 questions, and nothing helps)
The purpose is to show a little gradient at the end of the div...
Demo:
just try the demo below to see the bug:
div {
position: relative;
width: 300px;
height: 70vh;
padding: 1rem;
border: 2px solid red;
overflow: auto;
border-radius: 1rem;
}
div::before {
content: "";
position: absolute;
/* I tried also with fixed, but it goes outside the div :( */
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background-image: linear-gradient(to top, white, transparent);
/*outline: 5px solid blue;*/ /* if you can't see the gradient, uncommnet this line */
}
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur
magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia,
soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis
architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti
animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni
officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe
ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et
inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure
dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni
sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta
sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto
ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi
repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro!
</div>
This snippet demonstrates a way of doing this using position sticky on the pseudo element.
However, it relies on knowing the height and padding of the element so works for your example code and may work in your particular use case, but isn't a totally general solution.
div {
position: relative;
width: 300px;
height: 70vh;
padding: 1rem;
border: 2px solid red;
overflow: auto;
border-radius: 1rem;
}
div::before {
content: "";
position: sticky;
display: block;
top: 0;
left: 0;
margin-left: -1rem;
width: 100%;
height: calc(100% + 1rem);
background-image: linear-gradient(to top, white, transparent);
background-size: 100% 40%;
background-repeat: no-repeat;
background-position: left bottom;
margin-top: calc(-70vh - 1rem);
}
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur
magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia,
soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis
architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti
animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni
officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe
ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et
inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure
dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni
sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta
sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto
ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi
repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro!
</div>
You can try out this approach to add a shadow for your paragraph.
You can make your wrapper container relative to your inner content to keep your shadow fixed at the bottom of the box.
Here is the sample code.
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur
magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia,
soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis
architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti
animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni
officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe
ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et
inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure
dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni
sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta
sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto
ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi
repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro!
<div class="fixed-wrapper">
<div class="fixed-shadow" />
</div>
</div>
.content {
position: relative;
width: 300px;
height: 70vh;
padding: 1rem;
border: 2px solid red;
overflow: auto;
border-radius: 1rem;
margin: 0 auto;
}
.fixed-wrapper {
position: absolute;
bottom: 0;
width: 300px;
height: 100px;
}
.fixed-shadow {
position: fixed;
width: 300px;
height: 100px;
background-image: linear-gradient(to top, white, transparent);
}
I want the body section to scroll all the way up, with the sidebar section to the top of the screen, through multiple trial-and-error, the sidebar can do that, but the content section goes back to the bottom. I want when entering that page that the content and sidebar are aligned. Did I overlook where?
<style>
/* The side navigation menu */
.sidebar {
margin: 0;
padding: 0;
width: 230px;
background-color: #f1f1f1;
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 0 15px;
}
</style>
sidebar section
<div class="sidebar">
sidebar
sidebar
sidebar
</div>
content section
<div class="content">
<div class="col-12" id="main">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h1">content</h1>
</div>
<div class="card border-success">
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto voluptatem, soluta error at sequi cum veniam dolorem obcaecati ratione sunt accusamus saepe fugiat ipsam modi reiciendis facilis illum necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus eveniet ab sed cumque repudiandae qui assumenda, aut quibusdam libero similique voluptatibus dolor dolorem fugiat explicabo? Quia illum illo maxime modi?</p>
</div>
</div>
</div>
You can use flexbox to get the desired result.
Here's an example:
.wrapper {
display: flex;
justify-content: space-between;
}
.sidebar {
position: sticky;
top: 0;
width: 230px;
height: 100vh;
}
.content {
width: 900px;
padding: 0 10px;
}
<div class="wrapper">
<div class="sidebar">
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Sunt, accusamus repudiandae.</li>
<li>Cumque, vitae ut.</li>
<li>Officiis, a esse.</li>
<li>Soluta, maiores commodi.</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde quis quas ut enim corrupti error, alias praesentium assumenda cum iure nam ipsum recusandae sint facilis quia cupiditate obcaecati tempore maxime ea qui vel eveniet eius nulla ad. Nemo
cum repellat eum eos placeat. Repellendus autem sapiente maiores error officia maxime qui neque illo nemo magnam?</p>
<p>Delectus quae ipsa quos aliquam officia. Error facere perspiciatis veritatis, doloremque nisi nesciunt quaerat cumque repellendus nam cum minus ratione. Culpa repudiandae at, perspiciatis ad ea ducimus minima molestiae rerum aut laudantium non, placeat
exercitationem saepe, impedit velit tempore distinctio illum? Libero cumque a illum perspiciatis, praesentium ea tempore dolor ducimus, consequuntur veniam aut ipsa?</p>
<p>Omnis, fuga asperiores in, dolorum optio facilis ea eaque ad dolor quidem, harum magnam nisi? Voluptate deserunt et, pariatur eum similique ab ex quisquam rem, possimus nemo eius! Veritatis, deleniti dolorum ex eveniet eaque aut rerum, exercitationem
in quisquam, adipisci explicabo provident quae non praesentium fugiat. Molestias laudantium obcaecati animi aliquam corrupti delectus iste rem.</p>
<p>Nobis aliquam cum commodi, nesciunt suscipit nemo hic reiciendis ullam doloribus distinctio consequatur, neque totam. Esse atque soluta, necessitatibus minus debitis illum error, provident totam quam quae tempore, blanditiis nobis! Eligendi dolor
illum error fuga ex distinctio. Quibusdam, omnis modi ratione consectetur, porro doloremque inventore dolorem dolores perspiciatis neque cupiditate iusto dolore voluptas blanditiis autem.</p>
<p>Impedit id eius rerum optio? Similique repellat optio nostrum, ratione maiores aperiam et. Obcaecati, iste. Saepe eligendi libero recusandae repellat, commodi ab placeat id nobis aliquam neque dolorum ipsa minima harum pariatur eaque reiciendis assumenda
perferendis animi officia! Maiores totam et quia, nulla libero odio accusantium voluptatibus, maxime, perspiciatis porro rerum dolores eaque veritatis officia!</p>
<p>Reprehenderit ducimus, saepe omnis, vel deserunt maiores nostrum similique dolorem dolorum libero nisi iste repellat ullam odit, veritatis est officiis ut adipisci fuga eius illo necessitatibus esse ratione doloremque. Accusamus neque inventore dicta
ipsa iusto ex debitis labore est, adipisci odit suscipit repellendus sit atque aliquid omnis provident explicabo minima necessitatibus sapiente nobis ratione quam.</p>
<p>Velit, consectetur veritatis et non sunt corporis repellendus totam saepe nihil voluptate exercitationem dignissimos in corrupti culpa, excepturi necessitatibus vitae fugiat. Exercitationem dolores voluptas, numquam ea libero voluptatem consequuntur
necessitatibus quia iusto quam, aperiam repellendus molestias nobis sapiente. Corrupti autem nemo commodi maxime libero assumenda nulla, animi modi alias, consequatur facilis cumque accusantium sapiente architecto!</p>
</div>
</div>
I would like my div to show a different border on hover.
I tryied with absolute positioning of the ::before pseudo-element. But that does not work as expected. Can anyone help me to fix this? Or show me the correct way to achieve this?
The negative margin makes shrink with bottom and top other containers. So I tried with a new way.
div{
width: 300px;
height: 300px;
border:1px solid red;
overflow: hidden;
position: relative;
}
div:hover::before{
content: "";
position: absolute;
border: 4px solid blue;
width: 100%;
height: 100%;
}
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Neque delectus illo eligendi ipsa fugit quod praesentium
ducimus provident? Et labore ipsa eos praesentium error fugiat
culpa impedit voluptatem iusto aliquam? Optio temporibus
impedit eaque ex dolores harum id quasi sed, voluptas odit
libero eos similique maxime at doloribus, ipsam inventore
alias odio veritatis, quod animi nisi doloremque! Repellat,
deleniti inventore. Officiis saepe facilis, cumque minima quo
velit facere sequi, libero iste dicta maiores debitis dolor
quas, eum excepturi aut. Cumque, eum exercitationem. Quod ex
itaque incidunt culpa, obcaecati est accusantium! Consectetur,
in asperiores alias dolore fuga debitis ad illo reiciendis
voluptas perferendis expedita iure blanditiis doloremque
veniam ullam at qui ea, tempore, distinctio quibusdam!
Assumenda magnam nam harum reprehenderit fuga! Expedita iusto
non unde, debitis ab amet suscipit, sunt totam consectetur,
laborum alias similique earum ipsum ad quos dolorem dolorum?
Velit dolore voluptatem reiciendis voluptates exercitationem
distinctio similique in quis?
</div>
Thanks in advance.
You can quickly achieve this by using outline instead of border for avoiding the content to move:
div{
width: 300px;
height: 300px;
outline:1px solid red;
overflow: hidden;
position: relative;
}
div:hover{
outline: 4px solid blue;
}
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Neque delectus illo eligendi ipsa fugit quod praesentium
ducimus provident? Et labore ipsa eos praesentium error fugiat
culpa impedit voluptatem iusto aliquam? Optio temporibus
impedit eaque ex dolores harum id quasi sed, voluptas odit
libero eos similique maxime at doloribus, ipsam inventore
alias odio veritatis, quod animi nisi doloremque! Repellat,
deleniti inventore. Officiis saepe facilis, cumque minima quo
velit facere sequi, libero iste dicta maiores debitis dolor
quas, eum excepturi aut. Cumque, eum exercitationem. Quod ex
itaque incidunt culpa, obcaecati est accusantium! Consectetur,
in asperiores alias dolore fuga debitis ad illo reiciendis
voluptas perferendis expedita iure blanditiis doloremque
veniam ullam at qui ea, tempore, distinctio quibusdam!
Assumenda magnam nam harum reprehenderit fuga! Expedita iusto
non unde, debitis ab amet suscipit, sunt totam consectetur,
laborum alias similique earum ipsum ad quos dolorem dolorum?
Velit dolore voluptatem reiciendis voluptates exercitationem
distinctio similique in quis?
</div>
This will help you center the div well so that your code does not look bad when hoovering.
div{
width: 300px;
height: 300px;
outline:1px solid red;
overflow: hidden;
padding: 5px;
position: relative;
}
div:hover{
padding:5px;
outline: 4px solid blue;
}
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Neque delectus illo eligendi ipsa fugit quod praesentium
ducimus provident? Et labore ipsa eos praesentium error fugiat
culpa impedit voluptatem iusto aliquam? Optio temporibus
impedit eaque ex dolores harum id quasi sed, voluptas odit
libero eos similique maxime at doloribus, ipsam inventore
alias odio veritatis, quod animi nisi doloremque! Repellat,
deleniti inventore. Officiis saepe facilis, cumque minima quo
velit facere sequi, libero iste dicta maiores debitis dolor
quas, eum excepturi aut. Cumque, eum exercitationem. Quod ex
itaque incidunt culpa, obcaecati est accusantium! Consectetur,
in asperiores alias dolore fuga debitis ad illo reiciendis
voluptas perferendis expedita iure blanditiis doloremque
veniam ullam at qui ea, tempore, distinctio quibusdam!
Assumenda magnam nam harum reprehenderit fuga! Expedita iusto
non unde, debitis ab amet suscipit, sunt totam consectetur,
laborum alias similique earum ipsum ad quos dolorem dolorum?
Velit dolore voluptatem reiciendis voluptates exercitationem
distinctio similique in quis?
</div>
Hello it is my first time learning html-css and I want to make a traditional website that have both the top bar for searches and login and the side bar for navigation. I found a youtube video that helps me deal with the side bar and it it fixed. But the top navigation bar is not fixed and will be left behind if the user will scroll down
Normal Website:
Website Scrolled down:
Website using the "position: fixed;" in the menu class
Code:
<html>
<head>
<title>SYPHYM</title>
</head>
<style>
body
{
background: white;
margin: 0;
}
.menu
{
width: 100%;
background: #4b4276;
overflow: auto;
}
.menu ul
{
margin: 0;
padding: 0;
list-style: none;
line-height: 60px;
}
.menu li
{
float: left;
}
.menu ul li a
{
text-decoration: none;
width: 130px;
display: block;
text-align: center;
color: #f2f2f2;
font-size: 18px;
font-family: sans-serif;
letter-spacing: 0.5px;
}
.menu li a:hover
{
opacity: 0.5;
font-size:19px;
}
.search-form
{
margin-top: 15px;
float: right;
margin-right: 100px
}
input[type=text]
{
width: 300px;
padding: 7px;
border: none;
}
button
{
float: right;
background: orange;
color: white;
border-radius: 0 5px 5px 0;
cursor: pointer;
position: absolute;
padding: 7px;
font-family: sans-serif;
border: none;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.wrapper{
display: flex;
position: relative;
}
.wrapper .sidebar{
width: 200px;
height: 100%;
background: #4b4254;
padding: 30px 0px;
position: fixed;
}
.wrapper .sidebar h2{
color: #fff;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
}
.wrapper .sidebar ul li{
padding: 15px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0,0,0,0.05);
border-top: 1px solid rgba(255,255,255,0.05);
}
.wrapper .sidebar ul li a{
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 25px;
}
.wrapper .sidebar ul li:hover{
background-color: #594f8d;
}
.wrapper .sidebar ul li:hover a{
color: #fff;
}
.wrapper .main_content{
width: 100%;
margin-left: 200px;
}
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
}
.wrapper .main_content .info{
margin: 20px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div{
margin-bottom: 20px;
}
#media (max-height: 500px){
.social_media{
display: none !important;
}
}
</style>
<body>
<nav class = "menu">
<ul>
<li> <b>SYPHYM </li>
<li><a href = "#"> Join </li>
<li> Sign In </li>
</ul>
<form class = "search-form">
<input type = "text" placeholder = "Search">
<button> Search </button>
</form>
</nav>
<div class="wrapper">
<div class="sidebar">
<h2>User</h2>
<ul>
<li></i>My Orders</li>
<li></i>My Commisions</li>
</ul>
<br>
<h2>Categories</h2>
<ul>
<li></i>Music</li>
<li></i>Art</li>
<li></i>Writing</li>
<li></i>Video</li>
</ul>
</div>
<div class="main_content">
<div class="header">Welcome!! Have a nice day.</div>
<div class="info">
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sorry for the question I am totally stumped I don't know what to do.
Use position: fixed and set the correct z-index in menu fixed the issue:
body {
background: white;
margin: 0;
}
.menu {
width: calc(100% - 200px);
background: #4b4276;
overflow: auto;
position: fixed;
right: 0;
z-index: 200;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 60px;
}
.menu li {
float: left;
}
.menu ul li a {
text-decoration: none;
width: 130px;
display: block;
text-align: center;
color: #f2f2f2;
font-size: 18px;
font-family: sans-serif;
letter-spacing: 0.5px;
}
.menu li a:hover {
opacity: 0.5;
font-size: 19px;
}
.search-form {
margin-top: 15px;
float: right;
margin-right: 100px;
}
input[type='text'] {
width: 300px;
padding: 7px;
border: none;
}
button {
float: right;
background: orange;
color: white;
border-radius: 0 5px 5px 0;
cursor: pointer;
position: absolute;
padding: 7px;
font-family: sans-serif;
border: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body {
background-color: #f3f5f9;
}
.wrapper {
display: flex;
position: relative;
}
.wrapper .sidebar {
width: 200px;
height: 100%;
background: #4b4254;
padding: 30px 0px;
position: fixed;
}
.wrapper .sidebar h2 {
color: #fff;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
}
.wrapper .sidebar ul li {
padding: 15px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.wrapper .sidebar ul li a {
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas {
width: 25px;
}
.wrapper .sidebar ul li:hover {
background-color: #594f8d;
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .main_content {
width: 100%;
margin-left: 200px;
}
.wrapper .main_content .header {
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
}
.wrapper .main_content .info {
margin: 20px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div {
margin-bottom: 20px;
}
#media (max-height: 500px) {
.social_media {
display: none !important;
}
}
<html>
<head>
<title>SYPHYM</title>
</head>
<body>
<nav class="menu">
<ul>
<li> SYPHYM</li>
<li> Join</li>
<li> Sign In</li>
</ul>
<form class="search-form">
<input type="text" placeholder="Search" />
<button>Search</button>
</form>
</nav>
<div class="wrapper">
<div class="sidebar">
<h2>User</h2>
<ul>
<li>My Orders</li>
<li>My Commisions</li>
</ul>
<br />
<h2>Categories</h2>
<ul>
<li>Music</li>
<li>Art</li>
<li>Writing</li>
<li>Video</li>
</ul>
</div>
<div class="main_content">
<div class="header">Welcome!! Have a nice day.</div>
<div class="info">
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
nobis ut exercitationem atque accusamus sit natus officiis totam
blanditiis at eum nemo, nulla et quae eius culpa eveniet
voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
perferendis itaque alias sint, beatae non maiores magnam ad, veniam
tenetur atque ea exercitationem earum eveniet totam ipsam magni
tempora aliquid ullam possimus? Tempora nobis facere porro,
praesentium magnam provident accusamus temporibus! Repellendus harum
veritatis itaque molestias repudiandae ea corporis maiores non
obcaecati libero, unde ipsum consequuntur aut consectetur culpa
magni omnis vero odio suscipit vitae dolor quod dignissimos
perferendis eos? Consequuntur!
</div>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
nobis ut exercitationem atque accusamus sit natus officiis totam
blanditiis at eum nemo, nulla et quae eius culpa eveniet
voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
perferendis itaque alias sint, beatae non maiores magnam ad, veniam
tenetur atque ea exercitationem earum eveniet totam ipsam magni
tempora aliquid ullam possimus? Tempora nobis facere porro,
praesentium magnam provident accusamus temporibus! Repellendus harum
veritatis itaque molestias repudiandae ea corporis maiores non
obcaecati libero, unde ipsum consequuntur aut consectetur culpa
magni omnis vero odio suscipit vitae dolor quod dignissimos
perferendis eos? Consequuntur!
</div>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
nobis ut exercitationem atque accusamus sit natus officiis totam
blanditiis at eum nemo, nulla et quae eius culpa eveniet
voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
perferendis itaque alias sint, beatae non maiores magnam ad, veniam
tenetur atque ea exercitationem earum eveniet totam ipsam magni
tempora aliquid ullam possimus? Tempora nobis facere porro,
praesentium magnam provident accusamus temporibus! Repellendus harum
veritatis itaque molestias repudiandae ea corporis maiores non
obcaecati libero, unde ipsum consequuntur aut consectetur culpa
magni omnis vero odio suscipit vitae dolor quod dignissimos
perferendis eos? Consequuntur!
</div>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
nobis ut exercitationem atque accusamus sit natus officiis totam
blanditiis at eum nemo, nulla et quae eius culpa eveniet
voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
perferendis itaque alias sint, beatae non maiores magnam ad, veniam
tenetur atque ea exercitationem earum eveniet totam ipsam magni
tempora aliquid ullam possimus? Tempora nobis facere porro,
praesentium magnam provident accusamus temporibus! Repellendus harum
veritatis itaque molestias repudiandae ea corporis maiores non
obcaecati libero, unde ipsum consequuntur aut consectetur culpa
magni omnis vero odio suscipit vitae dolor quod dignissimos
perferendis eos? Consequuntur!
</div>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
nobis ut exercitationem atque accusamus sit natus officiis totam
blanditiis at eum nemo, nulla et quae eius culpa eveniet
voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
perferendis itaque alias sint, beatae non maiores magnam ad, veniam
tenetur atque ea exercitationem earum eveniet totam ipsam magni
tempora aliquid ullam possimus? Tempora nobis facere porro,
praesentium magnam provident accusamus temporibus! Repellendus harum
veritatis itaque molestias repudiandae ea corporis maiores non
obcaecati libero, unde ipsum consequuntur aut consectetur culpa
magni omnis vero odio suscipit vitae dolor quod dignissimos
perferendis eos? Consequuntur!
</div>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
nobis ut exercitationem atque accusamus sit natus officiis totam
blanditiis at eum nemo, nulla et quae eius culpa eveniet
voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
perferendis itaque alias sint, beatae non maiores magnam ad, veniam
tenetur atque ea exercitationem earum eveniet totam ipsam magni
tempora aliquid ullam possimus? Tempora nobis facere porro,
praesentium magnam provident accusamus temporibus! Repellendus harum
veritatis itaque molestias repudiandae ea corporis maiores non
obcaecati libero, unde ipsum consequuntur aut consectetur culpa
magni omnis vero odio suscipit vitae dolor quod dignissimos
perferendis eos? Consequuntur!
</div>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
nobis ut exercitationem atque accusamus sit natus officiis totam
blanditiis at eum nemo, nulla et quae eius culpa eveniet
voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
perferendis itaque alias sint, beatae non maiores magnam ad, veniam
tenetur atque ea exercitationem earum eveniet totam ipsam magni
tempora aliquid ullam possimus? Tempora nobis facere porro,
praesentium magnam provident accusamus temporibus! Repellendus harum
veritatis itaque molestias repudiandae ea corporis maiores non
obcaecati libero, unde ipsum consequuntur aut consectetur culpa
magni omnis vero odio suscipit vitae dolor quod dignissimos
perferendis eos? Consequuntur!
</div>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
nobis ut exercitationem atque accusamus sit natus officiis totam
blanditiis at eum nemo, nulla et quae eius culpa eveniet
voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
perferendis itaque alias sint, beatae non maiores magnam ad, veniam
tenetur atque ea exercitationem earum eveniet totam ipsam magni
tempora aliquid ullam possimus? Tempora nobis facere porro,
praesentium magnam provident accusamus temporibus! Repellendus harum
veritatis itaque molestias repudiandae ea corporis maiores non
obcaecati libero, unde ipsum consequuntur aut consectetur culpa
magni omnis vero odio suscipit vitae dolor quod dignissimos
perferendis eos? Consequuntur!
</div>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
nobis ut exercitationem atque accusamus sit natus officiis totam
blanditiis at eum nemo, nulla et quae eius culpa eveniet
voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
perferendis itaque alias sint, beatae non maiores magnam ad, veniam
tenetur atque ea exercitationem earum eveniet totam ipsam magni
tempora aliquid ullam possimus? Tempora nobis facere porro,
praesentium magnam provident accusamus temporibus! Repellendus harum
veritatis itaque molestias repudiandae ea corporis maiores non
obcaecati libero, unde ipsum consequuntur aut consectetur culpa
magni omnis vero odio suscipit vitae dolor quod dignissimos
perferendis eos? Consequuntur!
</div>
</div>
</div>
</div>
</body>
</html>
.menu {
width: calc(100% - 200px);
background: #4b4276;
overflow: auto;
position: fixed;
right: 0;
z-index: 200;
}
When using CSS position: absolute | relative | fixed, you need to make sure that the correct z-index value is used. The higher the value, the higher the stacking order for the HTML element. So in your case, without a z-index the text content is "above" the menu, and that's why the weird layout you showed in the above image.
there is a new CSS position property called sticky that means the chosen element will be sticky with scroll, so you need to put all HTML elements for the header in container div ..named with class header so your code will be :
.header {
position:sticky;
top:0;
left:0;
}
Was it necessary?
<html>
<head>
<title>SYPHYM</title>
</head>
<style>
body
{
background: white;
margin: 0;
}
.menu
{
width: 100%;
background: #4b4276;
overflow: auto;
}
.menu ul
{
margin: 0;
padding: 0;
list-style: none;
line-height: 60px;
}
.menu li
{
float: left;
}
.menu ul li a
{
text-decoration: none;
width: 130px;
display: block;
text-align: center;
color: #f2f2f2;
font-size: 18px;
font-family: sans-serif;
letter-spacing: 0.5px;
}
.menu li a:hover
{
opacity: 0.5;
font-size:19px;
}
.search-form
{
margin-top: 15px;
float: right;
margin-right: 100px
}
input[type=text]
{
width: 300px;
padding: 7px;
border: none;
}
button
{
float: right;
background: orange;
color: white;
border-radius: 0 5px 5px 0;
cursor: pointer;
position: absolute;
padding: 7px;
font-family: sans-serif;
border: none;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.wrapper{
display: flex;
position: relative;
}
.wrapper .sidebar{
width: 300px;
/*height: 100%;*/
height: 100vh;
background: #4b4254;
padding: 30px 0px;
/*position: fixed;*/
position: sticky;
top: 0;
}
.wrapper .sidebar h2{
color: #fff;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
}
.wrapper .sidebar ul li{
padding: 15px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0,0,0,0.05);
border-top: 1px solid rgba(255,255,255,0.05);
}
.wrapper .sidebar ul li a{
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 25px;
}
.wrapper .sidebar ul li:hover{
background-color: #594f8d;
}
.wrapper .sidebar ul li:hover a{
color: #fff;
}
.wrapper .main_content{
width: 100%;
/*margin-left: 200px;*/
}
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
}
.wrapper .main_content .info{
margin: 20px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div{
margin-bottom: 20px;
}
#media (max-height: 500px){
.social_media{
display: none !important;
}
}
</style>
<body>
<nav class = "menu">
<ul>
<li> <b>SYPHYM </li>
<li><a href = "#"> Join </li>
<li> Sign In </li>
</ul>
<form class = "search-form">
<input type = "text" placeholder = "Search">
<button> Search </button>
</form>
</nav>
<div class="wrapper">
<div class="sidebar">
<h2>User</h2>
<ul>
<li></i>My Orders</li>
<li></i>My Commisions</li>
</ul>
<br>
<h2>Categories</h2>
<ul>
<li></i>Music</li>
<li></i>Art</li>
<li></i>Writing</li>
<li></i>Video</li>
</ul>
</div>
<div class="main_content">
<div class="header">Welcome!! Have a nice day.</div>
<div class="info">
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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 :)