I’m having this big issue here, i don’t understand why this is happening.
I keep failing at this:
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.
Left of bounding rectangle is not correct.: expected 0 to be below -523.5
What does this means?
The nav-bar is always on the left of the screen, and with full screen height, I’ve tried on many devices to see if there’s some scrolling, but there isn’t.
I don’t know what to do! This is my pen !
Please, help!
I can see you created one media query in css /*Responsive screen*/ @media screen and (max-width: 1024px) with the implementation of fixed #navbar. It makes your navbar appears on top on the laptop/desktop screen.
To make navbar stays on the left side on the regular sized screen , you need to:
Change your media query into smaller break point. You can try media screen max-width: 815px.
Implement this before you stated media query (so that navbar sticks on the left)
#navbar {
position:fixed;
minwidth: 290px;
top: 0px;
left: 0px; //this is important to place your navbar on the left side
width: 300px;
height: 100%;
border-right: solid;
border-color: rgba(0, 22, 22, 0.4);
}
Implement this before and after you stated media query
//this is to create scrolling function in your nav bar
#navbar ul {
height: 88%;
padding: 0;
overflow-y: auto;
overflow-x: hidden;
}
Note: you better make <ul> element for your nav bar so that you can easily create scrolling function on your left nav bar
As for this statement “Left of bounding rectangle is not correct.: expected 0 to be below -523.5” it probably refers to your height of your nav rectangle.
