How to move my main content when hover sidebar is active?-CodePudding

:root {
  font-size: 16px;
  --text-primary: #b6b6b6;
  --text-secondary: #ececec;
  --bg-primary: #23232e;
  --bg-secondary: #141418;
  --transition-speed: 600ms;
}

body {
  overflow-x: hidden;
  color: black;
  background-color: rgb(81, 146, 225);
  margin: 0;
  padding: 0;
}

body::-webkit-scrollbar {
  width: 0.5rem;
}

body::-webkit-scrollbar-track {
  background: #00ff8c;
}

body::-webkit-scrollbar-thumb {
  background: #ff0000;
}

.main {
  top: 0;
  margin-left: 5rem;
  margin-top: 5rem;
  padding: 1rem;
}

.topbar {
  display: block;
  position: fixed;
  z-index: 3;
  background-color: var(--bg-primary);
}

.navbar {
  display: block;
  position: fixed;
  z-index: 3;
  background-color: var(--bg-primary);
  transition: 200ms ease;
}


/*small screen*/

@media only screen and (max-width:600px) {
  .navbar {
    bottom: 0;
    width: 100vw;
    height: 5rem;
  }
  .topbar {
    top: 0;
    width: 100%;
    height: 5rem;
  }
  .main {
    margin-top: 5rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5rem;
  }
}


/*mid size screens*/

@media only screen and (min-width:600px) {
  .navbar {
    top: 0;
    width: 5rem;
    height: 100vh;
  }
  .topbar {
    top: 0;
    width: 100%;
    height: 5rem;
  }
  .navbar:hover {
    width: 16rem;
  }
}


/*large screens todo*/

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <nav  style="padding-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;">
    <!--i would have my menu in here....-->
  </nav>

  <nav  style="padding-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;">
    <!--i would have my menu in here....-->
  </nav>

  <div id="content" name="main_content" >
    <h1>Demo</h1>
    <hr>
    <h3>This is just a demo page.
      <h3>
  </div>

</body>

So when you run the Snippet , and move the mouse towards left, my side bar would pop out from the left side , my question is how do i make my main content move a bit to the right when the sidebar pop's out from the left ?

I am trying to move the main content in such a way that when the sidebar is out , it would still be visible and once the side bar is not active it would go back to default position...

in my css i have defined margin-left: 5rem; as default for my main class

and so far i have tried to do things like this to my css:

.navbar:hover .main{
  margin-left: 16rem;
}

i thought if i change my css this way , this would set my main content margin-left to 16rem when the hover is active , but it does not seem to work that way...

CodePudding user response：

According to your element structure, .main is a sibling of .navbar, so you should use ~ to change styles for the sibling (you can check this document)

/*Animation*/
.main {
  transition: all 200ms ease;
}

.navbar:hover ~ .main {
  margin-left: 16rem;
}

:root {
  font-size: 16px;
  --text-primary: #b6b6b6;
  --text-secondary: #ececec;
  --bg-primary: #23232e;
  --bg-secondary: #141418;
  --transition-speed: 600ms;
}

body {
  overflow-x: hidden;
  color: black;
  background-color: rgb(81, 146, 225);
  margin: 0;
  padding: 0;
}

body::-webkit-scrollbar {
  width: 0.5rem;
}

body::-webkit-scrollbar-track {
  background: #00ff8c;
}

body::-webkit-scrollbar-thumb {
  background: #ff0000;
}

.main {
  top: 0;
  margin-left: 5rem;
  margin-top: 5rem;
  padding: 1rem;
  transition: all 200ms ease;
}

.topbar {
  display: block;
  position: fixed;
  z-index: 3;
  background-color: var(--bg-primary);
}

.navbar {
  display: block;
  position: fixed;
  z-index: 3;
  background-color: var(--bg-primary);
  transition: 200ms ease;
}

/*small screen*/

@media only screen and (max-width:600px) {
  .navbar {
    bottom: 0;
    width: 100vw;
    height: 5rem;
  }

  .topbar {
    top: 0;
    width: 100%;
    height: 5rem;
  }

  .main {
    margin-top: 5rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5rem;
  }
}


/*mid size screens*/

@media only screen and (min-width:600px) {
  .navbar {
    top: 0;
    width: 5rem;
    height: 100vh;
  }

  .topbar {
    top: 0;
    width: 100%;
    height: 5rem;
  }

  .navbar:hover {
    width: 16rem;
  }
  
  /*Add ~ for sibling element #content*/
  .navbar:hover ~ .main {
    margin-left: 16rem;
  }
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <nav  style="padding-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;">
    <!--i would have my menu in here....-->
  </nav>

  <nav  style="padding-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;">
    <!--i would have my menu in here....-->
  </nav>

  <div id="content" name="main_content" >
    <h1>Demo</h1>
    <hr>
    <h3>This is just a demo page.
    </h3>
  </div>

</body>