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: