Tell us what’s happening:
I’m trying to create a vertical nav bar with position: fixed without having to use floats. The problem is that (a) the nav bar keeps pushing my header down; (b) whenever I try to remove bullet points from the list elements (within the ul elements, within the nav element), the elements are on top of one another (instead of on separate rows as a vertical side bar). Can you help me with this?
Your code so far
<!DOCTYPE html>
<html="en-GB">
<head>
<meta charset="utf-8">
<title>Technical Documentation Page</title>
</head>
<body id="body1">
<main id="main-doc">
<nav>
<ul>
<li><a class="nav-link" href="#">Standmount</a></li>
<li><a class="nav-link" href="#">Floorstanding</a></li>
<li><a class="nav-link" href="#">Subwoofers</a></li>
<li><a class="nav-link" href="#">Portable</a></li>
<li><a class="nav-link" href="#">Headphones</a></li>
</ul>
</nav>
<section class="main-section" id="heading">
<header>
<h1>Standmount & Floorstanding Speakers</h1>
</header>
<p></p>
</section>
<section class="main-section" id="standmount">
<header>
<h2>Standmount Speakers</h2>
</header>
<p></p>
</section>
<section class="main-section" id="floorstanding">
<header>
<h2>Floorstanding Speakers</h2>
</header>
<p></p>
</section>
<section class="main-section" id="content4">
<header>
</header>
<p></p>
</section>
<section class="main-section" id="content5">
<header>
<p></p>
</header>
</section
</main>
</body>
</html>
#body1 {
width: 800px;
height: auto;
margin-right: auto;
margin-left: auto;
font-family: garamond, serif;
font-size: 16px;
text-align: center;
}
section {
width: 700px;
margin-left: 100px
}
h2 {
font-size: 20px;
}
nav {
height: auto;
width: 100px;
margin-left: 0px;
}
.nav-link {
text-decoration: none;
position: fixed;
display: inline-block;
}
ul {
}
li {
padding: 20px;
list-style-type: none;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
.
Link to the challenge: