Can't alter padding of a div when Bootstrap 4 navbar is collapsed (mobile)

Question

I have a navbar that is fixed to the top of page. Below it, I have the page content. The first content is a Bootstrap 4 image carousel. I'm noticing that for mobile, I need to put top-padding on the page-container (below the navbar, which contains my carousel) or else the carousel will be obscured by the navbar when it's expanded. The problem is, the same padding is there when the navbar is collapsed, leaving a bunch of white space.

Basically, I just want the page container (beginning w/ the carousel) to always sit right below the navbar, whether it's collapsed or not.

Snippet below (if you run at at full page it will make sense):

body {
    width:auto;
    letter-spacing: 1px;
    font-family:'Gudea', sans-serif;
    font-size:16px;
   background-color:#f7f7f7 !important;

}

.page-container {
    width: inherit;
    max-width: 100%;
    margin: auto;
    -webkit-box-shadow:0 0 15px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.3);
    box-shadow:0 0 15px rgba(0,0,0,0.3);

}


.navbar {
    background-color:#f7f7f7 !important;
    border-bottom:1px solid #E9E9E9;
    padding-bottom:30px;

}

.navbar.toggler.collapsed .page-container{
    background-color: blue
    
}

.container-fluid {
    background:#373737

}

.container{
    padding-right:15px;
    padding-left:15px;
    padding-top:25px;
    padding-bottom:25px;
    margin-right:auto;
    margin-left:auto;

}

.nav-item{
    text-align: right;
    padding:0px 10px 0px 10px

}

.nav-link{
    text-align:left;
    font-size:14px;
    color:#0c2d1c !important;
    font-weight:700;
}


.img {
    position: relative;
    width:  100px;
    height: 100px;
    background-position: 50% 50%;
}

.overview {
    padding-top: 50px;
    margin-right: 0%!important;
    margin-left: 0%!important;
}

@media (max-width: 769px) {

    .page-container{
        padding-top:50vh
    }

    .nav-link:hover span{ 
    color:#f7f7f7 !important;
    background-color:#0c2d1c;
    border-radius:8px;
    padding:6px 6px 6px 6px;
    }

    .nav-link span{ 
    padding-left:6px 
    }

}

@media (min-width: 769px) {

#about { 
    color:#f7f7f7 !important;
    background-color:#0c2d1c;
    border-radius:8px;
    padding:6px 6px 6px 6px;

}

.nav-link:hover { 
    color:#f7f7f7 !important;
    background-color:#0c2d1c;
    border-radius:8px;
    padding:6px 6px 6px 6px;

}

}





    
    
    
    
    
    

    
    
    
    
  Website
  
  
  



    


  

    
      
      
      
          
              
                  ABOUT
              
              
                  NEWS
              
              
                  LAB MEMBERS
              
              
                  RESEARCH
              
              
                  PUBLICATIONS
              
              
                  OPPORTUNITIES
              
              
      
    

    

    

    
      
        
          
            
              
              
              
            
            
              
                
              
              
                
              
              
                
              
            
            
              
              Previous
            
            
              
              Next
            
          
        
      
    


    
    
      
        
          Who We Are

                    
                 Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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.

My attempted solution:

CSS:

/* On mobile, when navbar collapsed, set page container padding to 0vh */
@media (max-width: 769px) {

    .navbar-collapse .page-container{
        padding-top:0vh
    }

}

Also tried a javascript solution, trying to add event-listener when navbar is collapsed in order to do something:

if ($('#toggle').attr('aria-expanded') == "true") {
  console.log("true")
  }

Neither solution is working. What am I doing wrong here? I imagine in JS I could just have an event listener that known when the navbar is collapsed, and when that happens, re-size the page container so there is no padding. But, maybe there is a simple CSS solution?

user_5875276 · Answer

Just saw that Bootstrap 4 has another option besides fixed-top - it's called "stick-top".

This fixed the issue:

Can't alter padding of a div when Bootstrap 4 navbar is collapsed (mobile)

1 Answers