Tell us what’s happening:
I have created a document that’s 800px wide with automatic height. This is how many sites are displayed, like the list of topics of freeCodeCamp’s forum. I have also created a fixed nav-bar (column) that stays on-screen as the page moves up and down. The nav-bar is 100px wide and the main content is 700px wide. But I’m struggling to:
-
Move the main content up to the top the screen (even though the nav-bar is only on the left (and 100px wide), it’s pushing the main section underneath it.
-
Prevent the nav-bar from overshadowing the text main section as you scroll down (it covers the left part of the text.
I would really appreciate any help from all of you. I’d be very grateful. Below I’ve posted a screenshot, along with my code (and then a link to my CodePen document).
Your code so far
/* Notes:
(Complete user story #6)
Up to user story #10
*/
#body1 {
width: 800px;
height: auto;
margin-right: auto;
margin-left: auto;
font-family: garamond, serif;
font-size: 16px;
text-align: justify;
background-color: #cacaca;
}
#headingh1 {
text-align: center;
}
section {
/*margin-left: 100px; sets main content further to the right */
width: 700px;
margin-left: 100px;
}
.sectionh2 {
/* Excludes h2 element within nav element */
font-size: 16px;
}
#navbar {
height: auto;
width: 100px;
display: flex;
flex-direction: column;
position: fixed;
}
.nav-link {
text-decoration: none;
background-color: red;
color: black;
font-weight: 700;
border-radius: 16px;
padding: 10px;
}
ul {
}
li {
padding: 30px;
list-style-type: none;
}
#navbarh2 {
font-size: 12px;
text-align: left;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!DOCTYPE html>
<html="en-GB">
<head>
<meta charset="utf-8">
<title>Technical Documentation Page</title>
</head>
<body id="body1">
<main id="main-doc">
<nav id="navbar">
<h2 id="navbarh2">Your number 1 speaker source ®</h2>
<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>
</ul>
</nav>
<section class="main-section" id="heading">
<header>
<h1 id="headingh1">Hi-fi & Home Cinema Speakers</h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque congue tristique. Pellentesque ullamcorper pulvinar odio in eleifend. Curabitur pharetra tortor vitae sapien sollicitudin, et auctor mi mollis. Integer efficitur massa ante, eu ornare sapien ornare et. Pellentesque euismod efficitur ligula. Morbi ac quam sed nisl egestas fermentum. Sed interdum velit quis arcu ultrices, sed tristique purus vestibulum. Vivamus in fringilla dui, nec gravida risus.</p>
<p>Nulla auctor faucibus velit in condimentum. Pellentesque mi sem, hendrerit ac congue at, maximus eget sem. Ut molestie sed enim in euismod. Integer tristique iaculis diam, at molestie metus porta nec. Vivamus luctus lobortis mi, eget pellentesque lectus laoreet finibus. Nam dignissim ultrices egestas. Donec eu lobortis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vestibulum justo sed enim maximus, in ultrices nunc consequat.</p>
</section>
<section class="main-section" id="standmount">
<header>
<h2 class="sectionh2">Standmount Speakers</h2>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque congue tristique. Pellentesque ullamcorper pulvinar odio in eleifend. Curabitur pharetra tortor vitae sapien sollicitudin, et auctor mi mollis. Integer efficitur massa ante, eu ornare sapien ornare et. Pellentesque euismod efficitur ligula. Morbi ac quam sed nisl egestas fermentum. Sed interdum velit quis arcu ultrices, sed tristique purus vestibulum. Vivamus in fringilla dui, nec gravida risus.</p>
<p>Nulla auctor faucibus velit in condimentum. Pellentesque mi sem, hendrerit ac congue at, maximus eget sem. Ut molestie sed enim in euismod. Integer tristique iaculis diam, at molestie metus porta nec. Vivamus luctus lobortis mi, eget pellentesque lectus laoreet finibus. Nam dignissim ultrices egestas. Donec eu lobortis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vestibulum justo sed enim maximus, in ultrices nunc consequat.</p>
</section>
<section class="main-section" id="floorstanding">
<header>
<h2 class="sectionh2">Floorstanding Speakers</h2>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque congue tristique. Pellentesque ullamcorper pulvinar odio in eleifend. Curabitur pharetra tortor vitae sapien sollicitudin, et auctor mi mollis. Integer efficitur massa ante, eu ornare sapien ornare et. Pellentesque euismod efficitur ligula. Morbi ac quam sed nisl egestas fermentum. Sed interdum velit quis arcu ultrices, sed tristique purus vestibulum. Vivamus in fringilla dui, nec gravida risus.</p>
<p>Nulla auctor faucibus velit in condimentum. Pellentesque mi sem, hendrerit ac congue at, maximus eget sem. Ut molestie sed enim in euismod. Integer tristique iaculis diam, at molestie metus porta nec. Vivamus luctus lobortis mi, eget pellentesque lectus laoreet finibus. Nam dignissim ultrices egestas. Donec eu lobortis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vestibulum justo sed enim maximus, in ultrices nunc consequat.</p>
</section>
<section class="main-section" id="subwoofer">
<header>
<h2 class="sectionh2">Subwoofers</h2>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque congue tristique. Pellentesque ullamcorper pulvinar odio in eleifend. Curabitur pharetra tortor vitae sapien sollicitudin, et auctor mi mollis. Integer efficitur massa ante, eu ornare sapien ornare et. Pellentesque euismod efficitur ligula. Morbi ac quam sed nisl egestas fermentum. Sed interdum velit quis arcu ultrices, sed tristique purus vestibulum. Vivamus in fringilla dui, nec gravida risus.</p>
<p>Nulla auctor faucibus velit in condimentum. Pellentesque mi sem, hendrerit ac congue at, maximus eget sem. Ut molestie sed enim in euismod. Integer tristique iaculis diam, at molestie metus porta nec. Vivamus luctus lobortis mi, eget pellentesque lectus laoreet finibus. Nam dignissim ultrices egestas. Donec eu lobortis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vestibulum justo sed enim maximus, in ultrices nunc consequat.</p>
</section>
<section class="main-section" id="portable">
<header>
<h2 class="sectionh2">Portable Speakers</h2>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque congue tristique. Pellentesque ullamcorper pulvinar odio in eleifend. Curabitur pharetra tortor vitae sapien sollicitudin, et auctor mi mollis. Integer efficitur massa ante, eu ornare sapien ornare et. Pellentesque euismod efficitur ligula. Morbi ac quam sed nisl egestas fermentum. Sed interdum velit quis arcu ultrices, sed tristique purus vestibulum. Vivamus in fringilla dui, nec gravida risus.</p>
<p>Nulla auctor faucibus velit in condimentum. Pellentesque mi sem, hendrerit ac congue at, maximus eget sem. Ut molestie sed enim in euismod. Integer tristique iaculis diam, at molestie metus porta nec. Vivamus luctus lobortis mi, eget pellentesque lectus laoreet finibus. Nam dignissim ultrices egestas. Donec eu lobortis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vestibulum justo sed enim maximus, in ultrices nunc consequat.</p>
</section
</main>
</body>
</html>
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:
