Fixed position issue

HTML-CSS
#1

Problem
I make a nav bar on the left side of the page and I intended to make the HTML Catalog stay on the top and fixed and the <li> tag is a scrolling nav part but now it stuck!
My pen: https://codepen.io/CaptainHenry/pen/mdmdxmB
Thanks! :grinning_face_with_smiling_eyes:

#2

Hey!

What’s happening is that when you set an element’s position to fixed, it is thrown out of normal flow so you need to set a margin-left to the main element or it would show behind the nav bar. you can try something like this.


main{
  min-height: 200vh;  // to check that the position: fixed is working,
  margin-left: 20rem;
}

also you dont need to add

<head><meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset='UTF-8'>
</head>

in your html since codepen does it by default.

Hope this helped! :slight_smile:

1 Like
#3

Thanks! I tried the code it was great and the content spot have scroll but the nav bar with <li> tag is still doesn’t working.

#4

It’s my mistake i forgot that in css you need to use /* */ for comments which is why the second rule was not getting implemented.

You need to use this instead.

main{
  min-height: 200vh;
  margin-left: 20rem;
}

by this do you mean when you click on a link, the viewport does not scroll to the element with the id that you set in the a tag’s href attribute?
because i tried it and its working for me

1 Like
#5

Hi, your navbar is stuck because you have used height:88%; to tackle this problem avoid using percent instead use view port property.

#nav-bar ul {
  background: #feffe0;
   height: 90vh;
  overflow-x: auto;
  overflow-y: scroll;
}

Keep in mind that percent and view port have some differences try playing with values you will find a perfect fit.

Hope you got your answer.
Happy coding :slightly_smiling_face:

1 Like
#6

OMG! Thanks this is the exact I need~ Thanks a lot!

#7

overflow-x: hidden; will completely hide anything that extends outside its container element horizontally. It’s recommended to not do this, and refactor your CSS to be more responsive - otherwise it is possible for your site to appear to be missing content.

1 Like
#8

Problem:
I keep failing at test 4,5,10,13
I tried fixing but it doesn’t work!
Thanks!
My pen: https://codepen.io/CaptainHenry/pen/mdmdxmB

#9

@CapHenry, when a test fails click the red button to see which test(s) are failing and text to help you correct the issue.

  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

The first failing message says

Each <section> element with the class of "main-section" should also have an id comprised of the <header> innerText contained within it, with underscores in place of spaces. The id may include special characters if there are special characters in the respective <header> innerText. (e.g. The <section> that contains the header, "JavaScript & Java", should have a corresponding id="JavaScript_&_Java").
Each 'main-section' should have an id attribute : expected false to equal true
AssertionError: Each 'main-section' should have an id attribute : expected false to equal true

Do you understand what the test is looking for?

Thoroughly read the remaining messages as they will guide you as well.

1 Like
#11

Thanks! I’ll try to read them again, guess I don’t really understand the problem :anguished:

#12

Sorry for the inconvenience but I ran into that error again. I got the corresponding id as it told but still can not pass the error.

#13

It’s unclear which error you’re referring to but looking through your code I see syntax errors which you need to fix.
Run your HTML code through the W3C validator.

  • Since copy/paste from codepen you can ignore the first warning and first two errors.

When you correct these the tests will pass.

1 Like
#14

Woah thanks a lots! My code got lots of syntax errors :sweat_smile:

#15

Hi, I have corrected the typo, thanks for informing! :slightly_smiling_face:

1 Like
#16

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