Tech. Doc. Page Story #14

This seems to be a fairly common theme, so I guess I am going to ask an oft repeated question and see if anyone can help me out. I am stuck on Story #14. I’ve got this displaying well on mobile phones and on a laptop, so by eye everything looks fine, but I cant get this to pass the computers test. Any help would be appreciated.

As far as I know, navbar is supposed to be somewhat like this:
(It’s the dock/bar you find at the top of webpages where you can search stuff or got to their home page, know about services, etc…)

<navbar id="navbar">
          <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
                <li><a href="#">Contact us</a></li>
                <li><a href="#">Services</a></li>
          </ul>
</navbar>

Now you need to give this entire portion/navbar element few properties in CSS like:
display: inline-block;
position: fixed;
along with suitable padding ,margin, width , so that it doesn’t change position even when you scroll-down.
This should solve your problem;
Another advice, type your CSS and html in the respective sections that codepen.io has provided, it keeps your code clean and readable.

Thanks for your help.

I typed the whole thing up in Sublime Text first so I could get a better overview of things. Though I tried to smash through it as quick as I could so its ended up pretty poorly laid out.

I tried the fixes you suggested but Ive still got the same error. I already had the “position:fixed;” line, but the “display: inline-block;” line wasnt in the ul css before so its there now.

Did you get through though?

No sadly not. Still only 15/16

The properties i mentioned are supposed to be assigned to navbar element

Ill have another look and a bit more of a play. I just dumped that code into ul and crossed my fingers

Perfect! Thank you! In hindisight it seems pretty damn obvious I should have had a separate nav element of the css code

Glad it worked! :+1:t3:

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