Position fixed navbar overlapping content (Technical documentation page)

Hi there, I’m new to web development and I ran into a small problem while creating my technical documentation page. Here’s the problem. If you can’t see the image, here’s a quick summary of my problem. I set the navbar position to fixed and it keeps on overlapping on my mainContent.

Your code so far

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Raleway:wght@800&family=Roboto&family=Roboto+Mono:wght@500&display=swap');

html,body{
    min-width:290px;
    color: #4d4e53;
    background-color: #ffffff;
    line-height: 1.5;
    font-family: Poppins, sans-serif;
}
u{
  color: blue;
}
table{
  border: 1px solid black;
}
td{
  border: 1px solid black;
}
section{
  padding-top: 20px;
}
.Header{
  font-size: 1.4rem;
  font-weight: 900;
}
.Subheader{
  font-size: 1.2rem;
  font-weight: 600;
  padding: 10px 5px 5px 0px;
}
code{
  background-color: #D3D3D3;
  font-size: 1.1rem;
  display: block;
  padding: 20px;
}
div #Note-div{
  background-color: rgba(0, 133, 242, 0.1);
  border-left: 4px solid #0085f2;
}
div.main-body{
  display: grid;
  display-template-columns: minmax(300px, auto) 1fr;
  display-template-areas: "navbar mainContent";
  grid-gap: 20px;
}

nav#navbar{
  grid-area: navbar;
  position: fixed;

}
nav#navbar a{
  display: block;
  border: 1px solid black;
  padding: 5px;
  margin: 10px 0;
  text-decoration: none;
  color: black;
}
main#main-doc{
  grid-area: mainContent;
  overflow-x: hidden;
}


@media screen and (max-width: 750px){
  div.main-body{
    grid-template-columns: 1fr;
    grid-template-areas: "navbar" "mainContent";
  }
  nav#navbar{
    position: inherit;
  }
}

a.nav-link:hover {
    color: white!important;
    background-color: black;
}


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Challenge: Build a Technical Documentation Page

Link to the challenge:

hello and welcome to fcc forum :slight_smile:

why not make your “main content” width adjusted to your available free width instead!!

and also if possible share a ‘codepen’ link of it, t gets easier to tinker around that way

happy learning :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.