Tell us what’s happening:
Here is the pen
https://codepen.io/tanctrl/full/bGBbyLW
When I resize smaller than 815 px my nav bar bbegins showing on top of the article. I have spent a few hours trying to fix it. The site passes all the test but iI really want to know what is going on.
Your code so far
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<html lang="en">
<link href="style.css" rel="stylesheet">
<head></head>
<nav id="navbar">
<header>Technical Documentation of React</header>
<li><a href="#Components" class="nav-link">Components</a></li>
<li><a href="#Functional_components" class="nav-link">Functional_components</a></li>
<li><a href="#Class-based_components" class="nav-link">Class-based_components</a></li>
<li><a href="#Virtual_DOM" class="nav-link">Virtual_DOM</a></li>
<li><a href="#Lifecycle_methods" class="nav-link">Lifecycle_methods</a></li>
<li><a href="#JSX" class="nav-link">JSX</a></li>
<li><a href="#timeline" class="nav-link">Timeline</a></li>
<li><a href="#common_idioms" class="nav-link">common_idioms</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Components">
<header>Components</header>
<article>
<p>React code is made of entities called components. Components can be rendered to a particular element in
the DOM using
the React DOM library. When rendering a component, one can pass in values that are known as "props"</p>
<code>ReactDOM.render(
<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));</code>
<p>The two primary ways of declaring components in React is via functional components and class-based
components.</p>
</article>
</section>
<section class="main-section" id="Functional_components">
<header>Functional_components</header>
<p>Functional components are declared with a function that then returns some JSX.</p>
<code>const Greeting = (props) => </code><code> div>Hello, {props.name}! /div </code></article>
</section>
<section class="main-section" id="Class-based_components">
<header>Class-based_components</header>
<article>
<p>Class-based components are declared using ES6 classes.</p><code>class ParentComponent extends React.Component {
state = { color: 'green' };
render() {
return (
<ChildComponent color={this.state.color} />
);
}
}</code>
</article>
</section>
<section class="main-section" id="Virtual_DOM">
<header>Virtual_DOM</header>
<article>
<p>another notable feature is the use of a virtual Document Object Model, or virtual DOM. React creates an
in-memory
data-structure cache, computes the resulting differences, and then updates the browser's displayed DOM
efficiently.</p>
<p>This process is called reconciliation.</p>
<p>This allows the programmer to write code as if the entire page is rendered on each change, while the
React libraries
only render subcomponents that actually change.</p>
<p>This selective rendering provides a major performance boost.[citation needed] It saves the effort of
recalculating the
CSS style, layout for the page and rendering for the entire page.</p>
</article>
</section>
<section class="main-section" id="Lifecycle_methods">
<header>Lifecycle_methods</header>
<article>
<p>Lifecycle methods use a form of hooking that allows the execution of code at set points during a
component's lifetime.</p>
<p>shouldComponentUpdate allows the developer to prevent unnecessary re-rendering of a component by
returning false if a
render is not required.</p>
<p>componentDidMount is called once the component has "mounted" (the component has been created in the user
interface,
often by associating it with a DOM node). This is commonly used to trigger data loading from a remote
source via an API.</p>
<p>componentWillUnmount is called immediately before the component is torn down or "unmounted". This is
commonly used to
clear resource-demanding dependencies to the component that will not simply be removed with the
unmounting of the
component</p>
<p>(e.g., removing any setInterval() instances that are related to the component, or an "eventListener" set
on the
"document" because of the presence of the component)</p>
<p>render is the most important lifecycle method and the only required one in any component. It is usually
called every
time the component's state is updated, which should be reflected in the user interface.</p>
</article>
</section>
<section id="JSX" class="main-section">
<header>JSX</header>
<article>
<p>SX, or JavaScript XML, is an extension to the JavaScript language syntax.</p>
<p>Similar in appearance to HTML, JSX provides a way to structure component rendering using syntax familiar
to many
developers.</p>
<p>React components are typically written using JSX,although they do not have to be (components may also be
written in pure JavaScript).</p>
<p>JSX is similar to another extension syntax created by Facebook for PHP called XHP.</p>
<p>An example of JSX code:</p><code>class App extends React.Component {
render() {
return (
<div>
<p>Header</p>
<p>Content</p>
<p>Footer</p>
</div>
);
}
}</code>
</article>
</section>
<section id="timeline" class="main-section">
<header>Timeline</header>
<article>
<ul>
<li>29 May 2013 Initial Public Release </li>
<li>20 July 2013 Support for comment nodes </li>
<li>20 October 2013 Improve Memory usage</li>
<li>20 December 2013 Added support for rows & cols, defer & async, loop for audio & video, autoCorrect
attributes.</li>
<li>20 February 2014 Added support for onLoad and onError on img elements.</li>
</ul>
</article>
</section>
<section id="common_idioms" class="main-section">
<header>common_idioms</header>
<article>
<p>React does not attempt to provide a complete "application library". It is designed specifically for
building user
interfaces[3] and therefore does not include many of the tools some developers might consider necessary
to build an
application. This allows the choice of whichever libraries the developer prefers to accomplish tasks
such as performing
network access or local data storage. Common patterns of usage have emerged as the library matures.
</p>
</article>
</section>
</main>
html,
body {
min-width: 290px;
color: #4d4e53;
background-color: #ffffff;
font-family: 'Open Sans', Arial, sans-serif;
line-height: 1.5;
}
#navbar { color:blue;
position: fixed;
min-width: 290px;
top: 0px;
left: 0px;
width: 300px;
height: 100%;
border-right: solid;
border-color: rgba(0, 22, 22, 0.4);
}
header {
color: blue;
margin: 10px;
text-align: center;
font-size: 1.8em;
font-weight: thin;
}
#main-doc header {
text-align: left;
margin: 0px;
}
#navbar ul {
height: 88%;
padding: 0;
overflow-y: auto;
overflow-x: hidden;
}
#navbar li {
color: #4d4e53;
border-top: 1px solid;
list-style: none;
position: relative;
width: 100%;
}
#navbar a {
display: block;
padding: 10px 30px;
color: #4d4e53;
text-decoration: none;
cursor: pointer;
}
#main-doc {
position: absolute;
margin-left: 310px;
padding: 20px;
margin-bottom: 110px;
}
section article {
color: #4d4e53;
margin: 15px;
font-size: 0.96em;
}
section li {
margin: 15px 0px 0px 20px;
}
code {
display: block;
text-align: left;
white-space: pre-line;
position: relative;
word-break: normal;
word-wrap: normal;
line-height: 2;
background-color: #f7f7f7;
padding: 15px;
margin: 10px;
border-radius: 5px;
}
@media only screen and (max-width: 815px) {
/* For mobile phones: */
#navbar ul {
border: 1px solid;
height: 207px;
}
@media only screen and (max-width: 815px){
#navbar {
background-color: white;
position: absolute;
top: 0;
padding: 300px;
margin: 100px;
width: 100%;
max-height: 275px;
border: none;
z-index: 1;
border-bottom: 2px solid;
}
}
#main-doc {
position: relative;
margin-left: 0px;
margin-top: 270px;
}
}
@media only screen and (max-width: 400px) {
#main-doc {
margin-left: -10px;
}
code {
margin-left: -20px;
width: 100%;
padding: 15px;
padding-left: 10px;
padding-right: 45px;
min-width: 233px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36
.
Challenge: Build a Technical Documentation Page
Link to the challenge: