Hi there, I’m stuck on getting a test to pass on my technical documentation page.
The requirement is:
- On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left side of the screen and should always be visible to the user.
I’ve tried to implement that solution with a media query as such:
@media screen and (min-width: 800px) {
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
border-right: 1px solid black;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
border: 0px;
border-bottom: 1px solid black;
}
.main {
margin-left: 200px;
}
}
So my page has the nav on top on pixel width less then 800, and fixed on the side if the screen width is over 800. I’ve tried it with several width however I can’t get it to pass the test and I don’t know what’s wrong with the solution. Any tips would be greatly appreciated!
Link to codepen: https://codepen.io/Xivik/pen/gKrprQ