Tell us what’s happening:
So I have finished the project but have some personal questions about better design.
My first central question is, why does all my elements (everything under main) collapse to the left when I click on my nav options? Originally the nav options would disappear and all existing headers and p’s would collapse to the left( I have no idea how to prevent the navs from disappearing). They still do collapse to the left even when I made my position of the #Side-Bar which contains my nav, fixed as well as absolute (The reason I made it fixed is so that the #Side-Bar is the whole height of the page and so that the nav wouldn’t disappear). This is making it extremely hard to test my nav elements when I am pretty sure they work.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Technical</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="Side-Bar">
<nav id="navbar">
<header>JS Documentation</header>
<a href="#Intro" class="nav-link">Intro</a>
<a href="#What" class="nav-link">What</a>
<a href="#Java" class="nav-link">Java</a>
<a href="#Hello" class="nav-link">Hello</a>
<a href="#Variables" class="nav-link">Variables</a>
</nav>
</div>
<main id="main-doc">
<section class="main-section" id="Intro">
<header class="first">Intro</header>
<p>1</p>
<p>2</p>
<code></code>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section class="main-section" id="What">
<header>What</header>
<p></p>
<p></p>
<code></code>
<ul>
<li></li>
<li></li>
</ul>
</section>
<section class="main-section" id="Java">
<header>Java</header>
<p></p>
<p></p>
<code></code>
</section>
<section class="main-section" id="Hello">
<header>Hello</header>
<p></p>
<p></p>
<code></code>
</section>
<section class="main-section" id="Variables">
<header>Variables</header>
<p></p>
<p></p>
<code></code>
</section>
</main>
</body>
</html>
/* file: styles.css */
#Side-bar{
height:100%;
width:300px;
background-color:white;
border:solid;
position:absolute;
position:fixed;
top:0;
left:0;
}
#main-doc{
position:relative;
left:320;
}
section header{
font-weight:bold;
font-size:25px;
position:relative;
left:-10px;
padding-top:20%;
}
.first{
padding-top:0%;
}
nav > header{
font-weight:bold;
font-size:30px;
padding-left:30px;
padding-bottom:10px;
border-bottom:1px solid black;
}
nav a{
display:flex;
height:40px;
padding-left:20px;
padding-top:10px;
font-size:20px;
border-bottom:1px solid black;
}
nav a:last-of-type{
border:none;
}
@media (min-width:20px){
p {
font-size:1.5rem;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: