postion fixed navbar overlap other content

Question

i´m trying to add more content under the navbar, but every time i try the navbar overlap the next items, I want fixed to always keep it in sight on the website. I tried also with the z-index, its not the issue.

I don't know if is something of the bootstrap pre installed stuff but it's driving me crazy.

/* roots and body stuff */

body {
  font-family: "Roboto", sans-serif;
  color: #1a1818;
}


/* nav bar stuff */

.logo-and-section-container {
  width: 100%;
  display: flex;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  position: fixed;
}

.navbar-logo-container {
  width: 5%;
}

.brand-logo {
  width: 80px;
  padding-right: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.union-logo-img {
  width: 100%;
}

.union-logo-text-for-media-query {
  font-size: 0;
}

.section-container {
  display: flex;
  align-items: center;
  margin-left: 40px;
}

.dropdown {
  font-size: 1.2rem;
  margin-right: 8px;
}

.fa-arrow-right {
  font-size: 0.8rem;
  margin-right: 2em;
  margin-left: 0.3em;
}

.secion-dropdown,
.fa-arrow-right {
  color: #1a1818;
  text-decoration: none;
  transition: all 0.3s ease-out;
}

.secion-dropdown:hover {
  text-decoration: none;
  color: #e14f17;
}

.secion-dropdown:hover>.fa-arrow-right {
  transform: rotate(90deg);
  color: #e14f17;
}

.search-bar-container {
  width: 45%;
  padding-left: 1%;
  display: flex;
  justify-content: flex-end;
}

.search-bar {
  align-self: center;
}

.search-button,
.btn-outline-success {
  color: black;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.search-button:hover,
.btn-outline-success:hover {
  color: #fff;
  background-color: #e14f17;
  border-color: #e14f17;
}

@media (max-width: 916px) {
  .search-bar-container {
    visibility: hidden;
    padding-left: 1000000px;
  }
  .logo-and-section-container {
    padding-top: 3rem;
    padding-bottom: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .union-logo-img {
    width: 10rem;
    margin-right: 2em;
    margin-bottom: 16px;
  }
  .navbar-logo-container {
    flex-direction: column;
    text-decoration: none;
    padding-bottom: 1.75rem;
  }
  .union-logo-text-for-media-query {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1818;
    display: flex;
    text-decoration: none;
  }
  a:hover {
    text-decoration: none;
  }
  .section-container {
    text-align: center;
    padding-right: 7%;
  }
  .fa-arrow-right {
    padding-left: 15px;
  }
}


/* nav bar stuff ends */

.division-bar {
  width: 80%;
  height: 2em;
  background: purple;
}





  
  
  
  
  
  
  
  
  
  
  UNION BINDINGS CO.



  
  
    
      
        
        UNION BINDINGS CO.
      
    
    
      
        Products
        
          All mountain
          Freestyle
          Splitboarding
        
      
      
        Technology
        
          100% Focus
          Forged Carbon
          Jet Fusion Printing
          Union Specific Technology
        
      
      
        Team
        
          International Team
          Team Movie
        
      
      
        Support
        
          Size Chart
          Disk Fit
          How to Set up Your Bindings
        
      
      
        Contact
        
          Local Shops
          Another action
          Distributors

Rohit Dalvi · Accepted Answer

Replace your body with the below code.

body {
  font-family: "Roboto", sans-serif;
  padding-top: 80px;
}

.brand-logo {
  width: 80px;
  padding-right: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.union-logo-img {
  width: 100%;
}

.dropdown {
  font-size: 1.2rem;
  margin-right: 8px;
}

.fa-arrow-right {
  font-size: 0.8rem;
  margin-right: 2em;
  margin-left: 0.3em;
}

.secion-dropdown,
.fa-arrow-right {
  color: #1a1818;
  text-decoration: none;
  transition: all 0.3s ease-out;
}

.secion-dropdown:hover {
  text-decoration: none;
  color: #e14f17;
}

.secion-dropdown:hover>.fa-arrow-right {
  transform: rotate(90deg);
  color: #e14f17;
}


  
  
  
  
  
  
  
  
  
  
  UNION BINDINGS CO.


  
    
    

    
      
        
          
            Products
            
              All mountain
              Freestyle
              Splitboarding
            
          
        
        
          
            Technology
            
              100% Focus
              Forged Carbon
              Jet Fusion Printing
              Union Specific Technology
            
          
        
        
          
            Team
            
              International Team
              Team Movie
            
          
        
        
          
            Support
            
              Size Chart
              Disk Fit
              How to Set up Your Bindings
            
          
        
        
          
            Contact
            
              Local Shops
              Another action
              Distributors

I have used Bootstrap Navbar toggle with responsive behaviors, with the logo shown on the left and toggler on the right by adding class navbar-expand-lg to the

tag. Also added class fixed-top for fixed navbar. To change the color of navbar refer color schemes.

Most importantly solution for the issue regarding the overlapping of content by the navbar, there needs to be some padding-top for body, which then works perfectly. See this demo to ensure it is working.

postion fixed navbar overlap other content

Answers (1)

Related Questions