Hello,
I am not having an issue with the functionality but the CSS. When I click one of the nav links on the left, all the content to the right of the nav bar goes on top of it. It’s as if clicking one of the nav links breaks the nav bar barrier and hovers on top of it.
Your code so far
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36 Edg/94.0.992.50
Challenge: Build a Technical Documentation Page
<!-- HTML -->
<body>
<nav id="navbar">
<header id="nav-header">The Story of Luna</header>
<ul id="nav-ul">
<li class="nav-li"><a href="#Introduction" class="nav-link">Introduction</a></li>
<li class="nav-li"><a href="#What_you_should_know" class="nav-link">What you should know</a></li>
<li class="nav-li"><a href="#Luna's_personality" class="nav-link">Luna's personality</a></li>
<li class="nav-li"><a href="#Her_history" class="nav-link">Her history</a></li>
<li class="nav-li"><a href="#Her_now" class="nav-link">Her now</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>
Introduction
</header>
<p>
</p>
<p>
</p>
<code>
</code>
</section>
<section class="main-section" id="What_you_should_know">
<header id="Introduction">
What you should know
</header>
<p>
</p>
<p>
</p>
<code>
</code>
</section>
<section class="main-section" id="Luna's_personality">
<header>
Luna's personality
</header>
<p>
</p>
<p>
</p>
<code>
</code>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
<section class="main-section" id="Her_history">
<header>
Her history
</header>
<p>
</p>
<p>
</p>
<code>
</code>
</section>
<section class="main-section" id="Her_now">
<header>
Her now
</header>
<p>
</p>
<p>
</p>
<code>
</code>
</section>
</main>
</body>
/* CSS*/
*
{
margin: 0;
}
/* NAV BAR */
#navbar {
position: fixed;
width: 302px;
height: 100%;
border-style: solid;
border-width: 1px;
overflow-y: scroll;
}
#nav-header
{
text-align: center;
margin-top: 15px;
margin-bottom: 20px;
}
.nav-li
{
list-style: none;
border: 1px solid;
padding: 10px;
cursor: pointer;
position: relative;
right: 21px;
margin-bottom: 25px;
}
.nav-link
{
text-decoration: none;
color: black;
}
/* BODY CONTAINER */
#main-doc
{
margin-left: 304px;
width: 100%;
position: absolute;
}
@media (max-width: 400px;)
{
p{
font-size: 12px;}
}