Fixed position menus when using bootstrap 4

Question

I have been trying to learn css, html, and javascript by creating a dashboard from scratch rather than just buying a boostrap dashboard ui. However, I have come across an issue I cannot seem to figure out. I have a sidebar menu and top menu that I want to be fixed:position so they remain static on the screen however if I do that the content div shifts underneath the menus. I realize i can add margin to shift them back into place but even then if I do the toggle button to expand the sliding menu then what is the best method to shift that sideways? I have put everything in this jsfiddle:

https://jsfiddle.net/4x60gqsn/

Thanks Shaun



    
    
    

    Collapsible sidebar using Bootstrap 4

    
    
    
    

    
    
    





    
        
        
            
                
                PP
            

            
                
                    
                        
                        
                            HOME
                        
                    
                
                
                    
                        
                        
                            TEST
                        
                    
                
            
        

        
        

            
                

                    
                        
                    
                    
                        
                            
                        
                        
                            
                        
                    
                
            
            
                Collapsible Sidebar Using Bootstrap 4
                Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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
                Lorem ipsum dolor sit amet, consectetur adipisicing 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
                Lorem ipsum dolor sit amet, consectetur adipisicing 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
                Lorem ipsum dolor sit amet, consectetur adipisicing 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.

user_3289660 · Answer

Assuming that your intention is to use position:fixed so that on a scroll the navbar remains in position.

This can also be achieved by using position: sticky; an alternative that can do the same job but more cleaner. Updated Fiddle

$(document).ready(function() {
  $('#sidebarCollapse').on('click', function() {
    $('#sidebar').toggleClass('active');
  });
});

/*
    DEMO STYLE
*/

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
  font-family: 'Poppins', sans-serif;
  background: #fff;
}

p {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.7em;
  color: #999;
}

a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}

.navbar {
  padding: 15px 10px;
  background: #fff;
  border: none;
  border-radius: 0;
  margin-bottom: 40px;
  border-bottom: 1px solid #dedede;
  background-color: #fff;
  position: sticky !important;
  top: 0px;
}

.bg-light {
  background-color: #fff !important;
}

.navbar-btn {
  box-shadow: none;
  outline: none !important;
  border: none;
}

.nav-side-btn {
  background-color: #282a2b;
}

.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #ddd;
  margin: 40px 0;
}

i,
span {
  display: inline-block;
}


/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.profile-btn {
  float: right;
  margin: 0px 20px;
}

#sidebar {
  position: sticky;
  top: 1px;
  height: 100vh;
}

#sidebar .nav-text {
  font-weight: 500;
  padding-left: 20px;
}

#sidebar .sidebar-header img {
  width: 200px;
}

#sidebar .sidebar-header {
  text-align: center;
}

#sidebar.active .nav-text {
  display: none;
}

.wrapper {
  display: flex;
  align-items: stretch;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  background: #fff;
  transition: all 0.3s;
  border-right: 1px solid #dedede;
}

#sidebar.active {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}

#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
  display: none;
}

#sidebar.active .nav-logo {
  display: none;
}

#sidebar.active .sidebar-header strong {
  display: block;
}

#sidebar ul li a {
  text-align: left;
}

#sidebar.active ul li a {
  padding: 20px 10px;
  text-align: center;
  font-size: 1.6em;
}

#sidebar.active ul li a i {
  margin-right: 0;
  display: block;
  font-size: 1.8em;
  margin-bottom: 5px;
}

#sidebar.active ul ul a {
  padding: 10px !important;
}

#sidebar.active .dropdown-toggle::after {
  top: auto;
  bottom: 10px;
  right: 50%;
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%);
}

#sidebar .sidebar-header {
  padding: 20px;
}

#sidebar .sidebar-header strong {
  display: none;
  font-size: 1.8em;
}

#sidebar ul.components {
  padding: 20px 0;
  border-bottom: 0px solid #47748b;
}

#sidebar ul li a {
  padding: 10px 20px;
  font-size: 1.6em;
  display: block;
}

#sidebar ul li a:hover {
  color: 282a2b;
  background: #e9e9e9;
}

#sidebar ul li a i {
  margin-right: 10px;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
  color: #fff;
}

a[data-toggle="collapse"] {
  position: relative;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
}

ul.CTAs {
  padding: 20px;
}

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}

a.download {
  background: #fff;
  color: #7386D5;
}

a.article,
a.article:hover {
  background: #e9e9e9 !important;
  color: #fff !important;
}


/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
  width: 100%;
  padding: 0px;
  min-height: 100vh;
  transition: all 0.3s;
}

.content-wrapper {
  padding: 20px;
}


/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
  #sidebar {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
    margin-left: -80px !important;
  }
  .dropdown-toggle::after {
    top: auto;
    bottom: 10px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  #sidebar.active {
    margin-left: 0 !important;
  }
  #sidebar .sidebar-header h3,
  #sidebar .CTAs {
    display: none;
  }
  #sidebar .sidebar-header strong {
    display: block;
  }
  #sidebar ul li a {
    padding: 20px 10px;
    font-size: 1.3em;
  }
  #sidebar ul li a span {
    font-size: 0.85em;
  }
  #sidebar ul li a i {
    margin-right: 0;
    display: block;
  }
  #sidebar ul ul a {
    padding: 10px !important;
  }
  #sidebar ul li a i {
    font-size: 1.3em;
  }
  #sidebar {
    margin-left: 0;
  }
  #sidebarCollapse span {
    display: none;
  }
  #sidebar .nav-logo {
    display: none;
  }
}




  
  
  

  Collapsible sidebar using Bootstrap 4

  
  
  
  

  
  
  





  
    
    
      
        
        PP
      

      
        
          
            
            
                HOME
              
          
        
        
          
            
            
                TEST
              
          
        
      
    

    
    

      
        

          
            
          
          
              
                
              
              
                
              
            
        
      
      
        Collapsible Sidebar Using Bootstrap 4
        Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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
        Lorem ipsum dolor sit amet, consectetur adipisicing 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
        Lorem ipsum dolor sit amet, consectetur adipisicing 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
        Lorem ipsum dolor sit amet, consectetur adipisicing 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.

user_8292178 · Answer

If you want to support all of the browsers, do the bootstrap way. Give body as much padding-top as the height of the header and padding-left as much as the width of the sidebar. For both the header and sidebar, use positin-fixed. Suppose if header has a 60px height, set body's padding-top to 60px.

body, html {
  height: 100%;
}

.width-100px {
  width: 100px;
}

.fixed-left {
  left: 0;
}

body {
  padding-top: 56px;
  padding-left: 100px;
}



  
    Navbar
    

    
      
        
          Home (current)
        
        
          Link
        
        
          
          Dropdown
        
          
            Action
            Another action
            
            Something else here
          
        
        
          Disabled
        
      
      
        
        
      
    
  





  
    
      
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum fugiat delectus, ea vitae iure reprehenderit quaerat, mollitia ipsam id qui nesciunt, officiis corporis quod! Aspernatur est velit exercitationem unde fuga.
        Explicabo incidunt sed aspernatur accusamus, mollitia repellendus aperiam minus inventore pariatur velit a necessitatibus libero eligendi molestiae magni nesciunt culpa vero exercitationem! Illum iure ratione eveniet dolore. Quo, officia earum?
        Pariatur quo quae deserunt sunt assumenda ipsa cupiditate maiores doloremque non explicabo consequuntur mollitia, enim fuga, laudantium consequatur minima, similique libero soluta ipsam distinctio. Sunt impedit expedita iste eveniet nam.
        Obcaecati soluta optio, reiciendis repellendus nostrum, recusandae quis placeat, provident officia vitae a. Voluptas explicabo earum, dolor et, sed excepturi perferendis nobis hic doloribus sint optio culpa tempora aspernatur ratione!
        Officiis totam placeat dolor, accusamus eaque sequi nulla cumque magni! Quisquam earum vitae accusamus vero eligendi harum a sunt, mollitia omnis laboriosam assumenda error sed tempore excepturi animi similique architecto?
        In amet eligendi aliquam sunt optio provident eius illum dolorum repellendus rem accusamus, quis beatae atque at quos excepturi ut facilis quibusdam incidunt magnam! Dolores et optio odio blanditiis enim!
        Totam nisi itaque ipsam aperiam dolores distinctio, sint facere quia enim, ab neque fugiat laudantium quis quam quo libero consectetur omnis tenetur possimus tempora eligendi quos! Ut quas ex ullam!
        Illum, minima. Repellendus debitis unde officiis tempora voluptas, modi cupiditate, blanditiis numquam quibusdam, expedita voluptatem aliquid ipsum alias. Eius, pariatur ipsa commodi in fugit doloremque atque optio laudantium soluta culpa.
        Eveniet commodi facilis fugiat autem sunt! Necessitatibus est ipsum consequuntur quidem, quia fugit tempore consequatur ullam veniam eius excepturi consectetur itaque unde maiores vitae, error beatae ipsa ea? Neque, commodi!
        Aperiam, officia aspernatur? Accusamus, quo. Corporis necessitatibus enim, omnis, voluptates tenetur harum optio quam repudiandae ea suscipit, commodi asperiores illum pariatur quidem nobis et. Modi quisquam dolorum earum unde laboriosam?

Fixed position menus when using bootstrap 4

2 Answers