The transition on the content is not working

Question

Here is the code i used. On pressing the navbar menu the content should move right with a delay of 0.7s same as the sidebar opens with a delay of 0.7s but it is not working. Kindly review the code and suggest something. is it because of some media query I am using or anything else.? Kindly review the code and suggest something.

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.header{
  width: 100%;
  height: 70px;
  background-color: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
}

.header img{
  width: 60px;
  height: 60px;
  margin-right: 15px;
}

.header h1 {
  line-height: 70px;
  color: #fff;
}

.Content{
  margin-top: 80px;
  width: 100;
  padding: 20px;
  float: right;
  transition: all 0.7s;
}

.Content img{
  width: 100%;
  max-width: 700px;
  display: block;
  margin: auto;
}

.Content p{
  text-align: justify;
}

.Sidebar{
  width: 20%;
  height: 100%;
  position: fixed;
  top: 70px;
  background-color: #353b48;
  left: -100%;
  transition: .7s;
}

.Sidebar ul{
  list-style: none;
}

.Sidebar ul li {
  border-bottom: 2px solid rgba(255, 255, 255, .1);
}

.Sidebar ul li a{
  display: block;
  text-decoration none;
  color: #fff;
  font-size: 20px;
  padding: 15px 25px;
  transition: .4s;
}

span{
  margin-left: 15px;
}

.Sidebar ul li a:hover {
  border-left: 10px solid white;
}

.social{
  margin-top: 200px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 30px;
  border-bottom: 2px solid rgba(255, 255, 255, .1);
  border-top: 2px solid rgba(255, 255, 255, .1);
  padding: 15px 25px;
}

i{
  font-size: 30px;
  color: #fff;
  transition: .2s;
}

i:hover{
  transform: scale(1.2);
  color: green;
}

.show-btn, .hide-btn {
  font-size: 35px;
  color: #fff;
  position: fixed;
  top: 15px;
  left: 50px;

}

#chk{
  position: absolute;
  visibility: hidden;
  z-index: -10;
}

.hide-btn{
  opacity: 0;
}

#chk:checked ~ .Sidebar{
  left: 0;
}

#chk:checked ~ .show-btn{
  opacity: 0;
}

#chk:checked ~ .hide-btn{
  opacity: 1;
}

#chk:checked ~ .Content{
  width: 80%;
  float: right;
  transition: all 0.7s;
}

@media(max-width: 768px){
  .Sidebar{
    width: 100%;
    text-align: center;
  }

  .Sidebar ul li a:hover {
    border-left: 30px solid white;
  }

  .header h1{
    display: none;
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side-NavBar</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

  </head>
  <body>

      <div class="header">
        <img src="../images/fullstackLogo.png" alt="logo-img">
        <h1>FullStack</h1>
      </div>

      <input type="checkbox" name="" id="chk">
      <label for="chk" class="show-btn">
        <i class="fa fa-bars"></i>
      </label>
      <label for="chk" class="hide-btn">
        <i class="fa fa-times"></i>
      </label>

      <div class="Sidebar">
          <ul>
            <li><a href="#"><i class="fa fa-home"><span>Home</span></i></a></li>
            <li><a href="#"><i class="fa fa-user"><span>About</span></i></a></li>
            <li><a href="#"><i class="fa fa-tasks"><span>Services</span></i></a></li>
            <li><a href="#"><i class="fa fa-rss"><span>Blog</span></i></a></li>
            <li><a href="#"><i class="fa fa-id-card"><span>Contact</span></i></a></li>
          </ul>
          <div class="social">
            <a href="#"><i class="fa fa-facebook-square"></i></a>
            <a href="#"><i class="fa fa-youtube-square"></i></a>
            <a href="#"><i class="fa fa-instagram"></i></a>
          </div>
      </div>

      <div class="Content">
        <img src="../images/laptop1.jpg" alt="body-img">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>

  </body>
</html>

I corrected your code in your question, you had a "About" into one of your closing `` element It works fine — MaxiGui, Sep 01 '20 at 10:45

Priya jain · Answer 1 · 2020-09-01T11:40:26.187

I corrected your code.

This CSS transitions is not working perfectly Because of you are using different CSS property of sidebar and content part to show this transitions.

Currently you are manipulating CSS property of sidebar is left -100% to 0 cause this issue.

Please manage CSS properties width:0% to 20% of sidebar which transact over a same period of time as content part.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}
.header {
  width: 100%;
  height: 70px;
  background-color: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
}
.header img {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}
.header h1 {
  line-height: 70px;
  color: #fff;
}
.Content {
  margin-top: 80px;
  width: 100%;
  padding: 20px;
  float: right;
  transition: all 0.7s;
}
.Content img {
  width: 100%;
  max-width: 700px;
  display: block;
  margin: auto;
}
.Content p {
  text-align: justify;
}
.Sidebar {
  width:0%;
  height: 100%;
  position: fixed;
  top: 70px;
  background-color: #353b48;
  left:0;
  transition: all 0.7s;
  overflow: hidden;
}
.Sidebar ul {
  list-style: none;
}
.Sidebar ul li {
  border-bottom: 2px solid rgba(255, 255, 255, .1);
}
.Sidebar ul li a {
  display: block;
 text-decoration none;
  color: #fff;
  font-size: 20px;
  padding: 15px 25px;
 transition: .4s;
}
span {
  margin-left: 15px;
}
.Sidebar ul li a:hover {
  border-left: 10px solid white;
}
.social {
  margin-top: 200px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 30px;
  border-bottom: 2px solid rgba(255, 255, 255, .1);
  border-top: 2px solid rgba(255, 255, 255, .1);
  padding: 15px 25px;
}
i {
  font-size: 30px;
  color: #fff;
 transition: .2s;
}
i:hover {
  transform: scale(1.2);
  color: green;
}
.show-btn, .hide-btn {
  font-size: 35px;
  color: #fff;
  position: fixed;
  top: 15px;
  left: 50px;
}
#chk {
  position: absolute;
  visibility: hidden;
  z-index: -10;
}
.hide-btn {
  opacity: 0;
}
 #chk:checked ~ .Sidebar {
 width: 20%;
}
 #chk:checked ~ .show-btn {
 opacity: 0;
}
 #chk:checked ~ .hide-btn {
 opacity: 1;
}
 #chk:checked ~ .Content {
 width: 80%;
}
 @media(max-width: 768px) {
   .Sidebar {
   width: 100%;
   text-align: center;
  }
   .Sidebar ul li a:hover {
   border-left: 30px solid white;
  }
   .header h1 {
   display: none;
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side-NavBar</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  </head>
  <body>
    <div class="header"> <img src="../images/fullstackLogo.png" alt="logo-img">
      <h1>FullStack</h1>
    </div>
    <input type="checkbox" name="" id="chk">
    <label for="chk" class="show-btn"> <i class="fa fa-bars"></i> </label>
    <label for="chk" class="hide-btn"> <i class="fa fa-times"></i> </label>
    <div class="Sidebar">
      <ul>
        <li><a href="#"><i class="fa fa-home"><span>Home</span></i></a>
          <About/li>
        <li><a href="#"><i class="fa fa-user"><span>About</span></i></a></li>
        <li><a href="#"><i class="fa fa-tasks"><span>Services</span></i></a></li>
        <li><a href="#"><i class="fa fa-rss"><span>Blog</span></i></a></li>
        <li><a href="#"><i class="fa fa-id-card"><span>Contact</span></i></a></li>
      </ul>
      <div class="social"> <a href="#"><i class="fa fa-facebook-square"></i></a> <a href="#"><i class="fa fa-youtube-square"></i></a> <a href="#"><i class="fa fa-instagram"></i></a> </div>
    </div>
    <div class="Content"> <img src="../images/laptop1.jpg" alt="body-img">
      <p> Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum. </p>
    </div>
  </body>
</html>

Please click on 'full page' to see correct output

No you did not... As mentionned is my comment in the question, You just let the "About" in the closing LI — MaxiGui, Sep 01 '20 at 11:25
HI, @MaxiGui The issue is about 'transition'. Which is not related by closing .Issue will be not resolve After correcting . He need to manipulate CSS Properties which I mentioned in my answer and transition is working fine in my code. — Priya jain, Sep 01 '20 at 11:35
Based on the snippet, I would not say that. But if you got what he wanted, that is fine by me. I canceled my down vote as you corrected the 'li'. And an element not closed correctly can really create "waves" — MaxiGui, Sep 01 '20 at 11:40

The transition on the content is not working

1 Answers1