Build a Technical Documentation Page Navbar?

Here is part of the assignment directions:

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 CSS:
@media only screen and (min-width: 851px) {

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

https://codepen.io/breanna-vandell/pen/ZEpJBPN

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

All of the tests seem to be passing for me. This doesn’t mean there isn’t some work left to do to make this look nicer. I’m just not sure what your question is.

1 Like

@breannalikesbiscotti, as @bbsmooth said, all tests are passing.

I think you’re overlooking the user story. It says, " On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen".
Since you included your media query I’m guessing the test is failing when you minimize the browser window. It should fail since 851px is not a regular size device.

As an aside, when you minimize the screen you may want to look at having the nav-bar move to the top. There’s no user story that says it can’t be there on a smaller device.

Thank you! I figured it out. I just needed to maximize my window screen when I ran the tests. That’s the only reason it wasn’t passing. I appreciate your reponse!

Thank you! I appreciate your response. I was just trying to get the test to pass before I moved on to making anything look nicer or doing anything extra. I finally got it to work by simply maximizing the window that I ran the test in.