Technical documentation help (Help please)

Hello everyone, my codepen is here:https://codepen.io/simonwanyauming/pen/eYGdmPX

I built a very barebones website and was unable to get the position:fixed to work for the . I managed to pass 15/16 tests. I couldn’t see what was wrong with the code so I created an id called “navba”. So, id=‘navba’ works and ‘navbar’ doesn’t work (hence I can’t pass the test, in fact I now only pass 12/16). Can someone see what I am doing wrong?

First of all, you are going to need to change the id back to “navbar”. That is just a requirement of the challenge and you can’t get around that. When you do change it back then you only fail one test. Read the red error message closely:

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

The parts I emphasized in bold are what you are missing. You need to use CSS to make it stationary on the left side. Do you have any ideas on how to do that?

Hi, thanks for the reply.

Yes, I actually wrote the code I thought I would use for it under the css for ‘navba’ with the position:fixed along with top and left positions being the essential component

that is:

#navbar {
width: 20%;
position: fixed;
top:0px;
left:0px;
background-color: orange;
}

However, this does not work as expected. What I was querying was why it worked when the id was ‘navba’ but not ‘navbar’ when the code seemed to me to be the same.

Get rid of the <style> tags in the CSS pane. You don’t need them for codepen and they are messing up your CSS styling.

1 Like

Brilliant, that worked!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.