Navbar resize problem solved!

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:

i fixed this problem by adding padding:175px; to my css main doc @media max-width 815

Since you’ve provided a link to your pen there’s no need to also provide all the code but for future reference…

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.