TechQA.

Element collapses after setting navbar to position:fixed

102 views Asked by At

I want my sidemenu to be fixed. But whenever I do it the content page crashes. It's this class menu_left . When I remove position: fixed then all works fine. But i want it to be fixed. I just want the menu to stay in position so I can scroll down my content only.

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

nav {
    padding: 10px 40px;
    background: white;
    box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}


#app {
    display: flex;
}

.topbar-user {
    display: flex;
}

.menu_left {
    background: #333c4e;
    width: 200px;
    height: 100vh;
    position: fixed;
}

.menu_left-icon {
    padding: 20px;
}

.menu_left-item {
    display: flex;
    align-items: center;
    color: white;
    text-decoration: none;
}

.menu_left-item:hover {
    background: #293141;
    transition: 0.5s;
    
}

.topbar-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.main__content {
    width: 100%;
    overflow: scroll;
}

.main__content-container {
    padding: 34px 34px;
}

.imgs {
    width: 34px;
    padding: 20px;
}

.white-card {
    background-color: #fff;
    width: 100%;
    display: flex;
    margin-top: 34px;
    height: auto;
    align-items: center;
    box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);

}

.card1 {
    flex: 1;
}

.card2 {
    padding: 20px;

}

@media (max-width: 600px) {
    .menu_left {
        display: none;
    }

}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>


    <nav>
        <div class="topbar-items">
       <H1>Logo</H1>
       <div class="topbar-user">
           <i class="fas fa-bell"></i>
           <p>Jan Kowalski</p>
           <i class="fas fa-angle-down"></i>
       </div>
    </div>
    </nav>

<div id="app">
   <div class="menu_left">
   <a href="" class="menu_left-item">
    <div class="menu_left-icon"><i class="fas fa-home"></i></div>
    <div class="menu_left-text"> Item</div>
   </a>
   <a href="" class="menu_left-item">
    <div class="menu_left-icon"><i class="fas fa-home"></i></div>
    <div class="menu_left-text"> Item</div>
   </a>
   </div>

   <div class="main__content">
       <div class="main__content-container">
<h2>Main Page</h2>
<div class="white-card">

<div class="card-title">
    <img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
 </div>
 <div class="card1">
    <h4>User</h4>
    <p>message</p>

 </div>
 <div class="card2">
    <p>19.02.2020</p>
 </div>

</div>

<div class="white-card">

    <div class="card-title">
        <img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
     </div>
     <div class="card1">
        <h4>User</h4>
        <p>message</p>
    
     </div>
     <div class="card2">
        <p>19.02.2020</p>
     </div>
    
    </div>

       </div>
  


   </div>
</div>



</body>
</html>

html css
Original Q&A
1

There are 1 answers

11
alotropico On BEST ANSWER

I undesrtand you meant to say the content "collapses" to the left (not crashes).

You could use a pusher placeholder element like so:

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

nav {
    padding: 10px 40px;
    background: white;
    box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
    position: fixed;
    width: 100%;
    box-sizing: border-box;
}

#app {
    display: flex;
    padding-top: 47px;
}

.topbar-user {
    display: flex;
}

.menu_left {
    background: #333c4e;
    width: 200px;
    height: 100vh;
    position: fixed;
}
.menu_left-pusher {
    flex: 0 0 200px;
}

.menu_left-icon {
    padding: 20px;
}

.menu_left-item {
    display: flex;
    align-items: center;
    color: white;
    text-decoration: none;
}

.menu_left-item:hover {
    background: #293141;
    transition: 0.5s;
    
}

.topbar-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.main__content {
    width: 100%;
}

.main__content-container {
    padding: 34px 34px;
}

.imgs {
    width: 34px;
    padding: 20px;
}

.white-card {
    background-color: #fff;
    width: 100%;
    display: flex;
    margin-top: 34px;
    height: auto;
    align-items: center;
    box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);

}

.card1 {
    flex: 1;
}

.card2 {
    padding: 20px;

}

@media (max-width: 600px) {
    .menu_left {
        display: none;
    }

}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>


    <nav>
        <div class="topbar-items">
       <H1>Logo</H1>
       <div class="topbar-user">
           <i class="fas fa-bell"></i>
           <p>Jan Kowalski</p>
           <i class="fas fa-angle-down"></i>
       </div>
    </div>
    </nav>

<div id="app">
  <div class="menu_left-pusher">...</div>
   <div class="menu_left">
   <a href="" class="menu_left-item">
    <div class="menu_left-icon"><i class="fas fa-home"></i></div>
    <div class="menu_left-text"> Item</div>
   </a>
   <a href="" class="menu_left-item">
    <div class="menu_left-icon"><i class="fas fa-home"></i></div>
    <div class="menu_left-text"> Item</div>
   </a>
   </div>

   <div class="main__content">
       <div class="main__content-container">
<h2>Main Page</h2>
<div class="white-card">

<div class="card-title">
    <img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
 </div>
 <div class="card1">
    <h4>User</h4>
    <p>message</p>

 </div>
 <div class="card2">
    <p>19.02.2020</p>
 </div>

</div>

<div class="white-card">

    <div class="card-title">
        <img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
     </div>
     <div class="card1">
        <h4>User</h4>
        <p>message</p>
    
     </div>
     <div class="card2">
        <p>19.02.2020</p>
     </div>
    
    </div>

       </div>
  


   </div>
</div>



</body>
</html>

Related Questions in HTML

Related Questions in CSS

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions