I fixed this last night and made some other changes in CSS and now I’m getting this message again…
“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%;
}
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.
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.
