"The <header> element with id='header' should always be at the top of the viewport" step failing when using Bootstrap class navbar-fixed-top

[kev0587]

Issue Description

For the Build a Product Landing Page project, it states "use whichever libraries you need". I decided to use Bootstrap and gave my navbar a class of "navbar-fixed-top". When I was finished with the project and ran the tests, the "The header element with id='header' should always be at the top of the viewport" step kept failing even though I had the fixed navbar nested within the header element.

I decided to try adding CSS for id="header" and set the position = fixed and set top = 0.

header {
  position: fixed;
  top: 0;
}

Doing this allowed the test case to pass, but I don't think this should be required if you're using a Bootstrap navbar with the class "navbar-fixed-top". Would it be possible for the test case to look for a navbar within the header element that has a "fixed-top" class, just in case other students decide to use a library that provides pre-defined classes for different navbar states like SemanticUI or Bootstrap?

Browser Information

• Browser Name, Version: Google Chrome v 56.0.2924.87 (64-bit)
• Operating System: Windows 10 Pro 64-bit
• Mobile, Desktop, or Tablet: Desktop

Your Code / Link to Your Pen

https://codepen.io/kev0587/pen/yMpPdQ

I commented out the header css @ near the top of the file - if you run the test, it will fail. If you uncomment the header css and run the test, it will pass.

Screenshot

[Christian-Paul]

@kev0587 Thanks for the detailed bug report!

While technically the old test was working properly (the header element in your project wasn't at the top of the viewport, though the nav element was), the test should definitely be changed to accommodate for how bootstrap and other libraries achieve this.

I don't want to check for library specific classes, since we'd have to take every popular library/version into consideration, and I'd rather verify that some element that's serving as a navbar is actually at the top rather than assuming the user implemented the library's class properly.

That being said, I think the best way to go about testing this is to obtain the positions of the header element and its children, and to use the element whose position is closest to the top for our test.

[no-stack-dub-sack]

@Christian-Paul are you going to take this one on?

[Christian-Paul]

@no-stack-dub-sack Yup, working on it now