Layout error with navbar location/visibility

I fixed this last night and made some other changes in CSS and now I’m getting this message again… :eyes:

“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.”

perhaps a glorious coder with a fresh set of eyes can spot the mistake on this one.

#navbar {
  background-color: #1f1f1fd2;
  position: left;
  top: 0;
  left: 0;
  height: 100%;
  margin-bottom: 10px;
}

@media only screen and (min-width: 400px) {
  /* For mobile phones: */
  #navbar ul {
    border: hidden;
    height: 100%;
  }

  #navbar {
    background-color: #1f1f1fd2;
    position: fixed;
    top 0;
    left; 0;
    width: 250px;
    height: 100%;
  }

Full code here

This link was shared to me by ALLESS.
https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/

Try experimenting, having that instruction in mind. Hope it helps!

1 Like

In your media query, you have set the min-width to 400px. That may cause an issue i recognizing the device based on its width.

Instead distinguish the devices with a threshold of 1000px width. Also in the media query, use max-width instead of min-width for smaller devices.

Form two media queries. The one with max-width of 1000px should target smaller devices and enclose the part where you want to have the navbar fixed on top.
The second media query should have a min-width of 1000px to target laptops, desktops, etc. Put the style where navbar should be to the left of the page in this media query.

1 Like

I’m assuming the issue has been fixed, because it’s running 16/16 on my browser.


Screenshot 2022-04-05 8.19.41 PM

hmmm, interesting, I continue to show an error on my end, I have experimented with the suggested references but still glitching in mobile layout.

I saw your code and the thing is that you have reversed your media queries. For smaller screens, the navbar appears to the side and on top for larger screens.
Try putting the media queries the opposite of what those are now.

lol I’m having a hell of a time with this one. I keep working on it and end up in the same knot. grrrr. I might have to take a step back and watch a tutorial.

Instead of
@media only screen and (max-width: 1200px) , can you try putting

@media only screen and (max-width: 800px)?

And in the second media query, instead of
@media only screen and (max-width 480px),
try putting
@media only screen and (min-width: 1200px).

Also I had see that you were missing a colon after max-width.

I’m trying lol… not quite working yet, it may be a silly typo i hope.

Thank you for sharing!

1 Like