Need help with Technical document Codepen

Hi guys I keep getting this message and I’ve checked everything! I’m 99% sure that my CSS is all correct unless there’s an override somewhere which I’m yet to find. But this is how my #navbar is set up so far:

#navbar{
  position: fixed;
  min-width:290px;
  top:0px;
  left:0px;
  width:300px;
  height:100%;
  border-right:solid;
  border-color:rgba(0,22,22,0.4)
} ```

and below is what my code looks like:


<nav id="navbar">
        <header>Programmer's Bible: Python</header>
        <ul class="nav nav-pills nav-stacked">
          <a class="nav-link" href="#About_Python" rel="internal">
            <li>About Python</li>
          </a>
          <a class="nav-link" href="#Introduction" rel="internal">
            <li>Introduction</li>
          </a>
          <a class="nav-link" href="#Python_Strings" rel="internal">
            <li>Python Strings</li>
          </a>
          <a class="nav-link" href="#Python_Lists" rel="internal">
            <li>Python Lists</li>
          </a>
          <a class="nav-link" href="#Python_Sorting" rel="internal">
            <li>Python Sorting</li>
          </a>
          <a class="nav-link" href="#Dict_Hash_Table" rel="internal">
            <li>Dict Hash Table</li>
          </a>
          <a class="nav-link" href="#Python_Regular_Expressions" rel="internal">
            <li>Python Regular Expressions</li>
          </a>
<a class="nav-link" href="#Reference" rel="internal">
            <li>Reference</li>
          </a>
        </ul>
      </nav>

Can you add a link to your Codepen project?

https://codepen.io/KobadaTech/pen/vqvJjw?editors=0100

I’m also having problems with making it responsive past the 860px mark. It keeps breaking.

On line #7 of your CSS, you start a media query. You have not closed it. Where should the media query end? Also, I notice you have two media queries for max-width: 815px. I suggest combining them and removing any repetitive code in order to make your CSS easier to follow.

Hi Randell. I’ve removed the media query from line 7. Sorry about that I was just testing.

You need to save the pen, because I still see a media query on line #7.

1 Like

You should be able to see it now?

Yes, I see it now. If you are going to use absolute positioning, you will need to specify where the maindoc content starts (on the left). Something like below will get you started.

left: 150px;

I’ve added that to main doc but it’s still popping up with the following message. “On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content.”

My last reply was just to help you make the content look a little better on screens wider than 850px.

As far as why you are not passing the one test, you need to read the entire error message. It tells you exactly how to proceed in order to pass (see below).

  1. On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content.

Did you make sure the viewport is as wide as it can be? Once I did that with your project, it passes all the tests.

Speechless hahaa!! Thanks.

If you use the left: 150px suggestion for #maindoc, then you will need to add left: 0px to the media query for max-width: 815px for #maindoc, to bring the content back over to the far left.