Fixed position with responsive nav and divs, why is it overlapping?

Question

I'm trying to make this responsive with a fixed nav. How can I do that without the home column overlapping the navbar? I want the two columns to be flush together and resize with the screen. The nav needs to stay there as I'm adding several "pages" vertically down the one page. I feel like it should be obvious but I've been struggling for a while and I have read almost all of the recent answers and tried so many things and nothing is working for me.

html,
body {
  height: 100vh;
  width: 100vw;
  flex: 1;
  overflow: auto;
}

.nav {
  background-color: #e5b032;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.nav a {
  color: #000;
  margin: 3rem 1rem;
}

.nav a:hover {
  background-color: #41dbb8;
}

.home {
  background-color: #fb7592;
  flex-direction: column;
  position: relative;
  max-width: 100%;
  height: 100vh;
  align-content: center;
  text-align: center;
  overflow: hidden;
  padding: 0;
}







Home



 



    
        
            
                
                    Home
                    Projects
                    Blog
                    About the Developer
                    Contact
                
            
        
        
        
                This is the content.

user_13210199 · Answer

This will be the structure


  
    ...
  

      This is the content.

remove position: fixed; for .nav class

add overflow: auto; to main content to make scrollable. also give some width to left-nav

html,
body {
  height: 100vh;
  width: 100vw;
  flex: 1;
  overflow: auto;
}

.nav {
  background-color: #e5b032;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  width: 200px;
  top: 0;
  left: 0;
}

.nav a {
  color: #000;
  margin: 3rem 1rem;
}

.nav a:hover {
  background-color: #41dbb8;
}

.home {
  background-color: #fb7592;
  flex-direction: column;
  position: relative;
  max-width: 100%;
  height: 100vh;
  align-content: center;
  text-align: center;
  overflow: auto;
  padding: 0;
}

.row {
  display: flex;
}


  
    
      
        
          Home
          Projects
          Blog
          About the Developer
          Contact
        
      
    

    
      This is the content.
      This is the content.
      This is the content.
      This is the content.
      This is the content.

user_13573444 · Answer

Was it necessary? Left sidebar is now fixed with position sticky and top 0

html,
body {
  /*height: 100vh;
  width: 100vw;
  flex: 1;
  overflow: auto;*/
  
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

.row {
   display: flex;
   width: 100%;
}

.col-md-3.d-flex {
   background-color: #e5b032;
   justify-content: space-between;
   align-items: center;
   height: 100vh;
   position: sticky;
   top: 0;
}

/*.nav {
  background-color: #e5b032;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}*/

.nav a {
  color: #000;
  margin: 3rem 1rem;
}

.nav a:hover {
  background-color: #41dbb8;
}

.nav.nav-pills.flex-column {
  display: flex;
}

.home {
  background-color: #fb7592;
  flex-direction: column;
  /*position: relative;*/
  /*max-width: 100%;*/
  width: 100%;
  /*height: 100vh;*/
  height: 150vh;
  align-content: center;
  text-align: center;
  overflow: hidden;
  padding: 0;
}


  
    
      
        
          Home
          Projects
          Blog
          About the Developer
          Contact
        
      
    

    
      This is the content.

Fixed position with responsive nav and divs, why is it overlapping?

2 Answers