Here is the HTML AND SCSS(SASS) code for a NAVBAR:
<div id="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#main">Main</a></li>
<li><a href="#bedroom">Bedroom</a></li>
<li><a href="#living-room">Living Room</a></li>
<li><a href="#bathroom">Bathroom</a></li>
<li><a href="#kitchen">Kitchen</a></li>
<li><a href="#others">Others</a></li>
</ul>
</div>
#navbar{
position: fixed;
top: 0;
height: 4rem;
width: 100%;
background-color: $dark-color1;
ul{
display: flex;
justify-content: center;
justify-content: space-between;
padding: 0 3rem;
background:$dark-color2;
text-align: center;
align-items: center;
}
li{
display: flex;
font-size: 1.3rem;
}
a{
color: $light-color1;
text-decoration: none;
list-style: none;
padding: 20px;
}
a:hover{
background-color: $light-color2;
color: $dark-color2;
}
}
When I add other div elements below the navbar, such as the bedroom div shown below:
<div id="bedroom" class = "room">
<p class = "title"> Bedroom</p>
<div class="flooring-tile">
<label for="Flooring-tile">Flooring Tile</label>
<input type="checkbox">
</div>
<div class="flooring-carpet">
<p class = "pname">Flooring Carpet</p>
<label for="Replacement">Replacement</label>
<input type="checkbox">
<label for="Powerclean">Powerclean</label>
<input type="checkbox">
}
the Bedroom div tends to overlap with the navbar. I want to create a page where there is no scrolling (overflow: hidden) and the user should only navigate using the scroll bar.
However, since the content of #bedroom is hiding behind the navbar, I am unable to align the pages properly.