Header issues
Closed this issue · 5 comments
We noticed two issues with the NIST header as seen in the picture:
The header and footer do not have the same color, according to the inspector:
.nist-header: background #000.nist-footer: background #333333
The arrow is not centered (seems to be due to top: -2px for .nist-header__logo-icon class).
Thanks!
Hi @pdessauw any way you can send a link to project page you are working on so we can investigate further? On other pages that are using header the arrow and image are centered (e.g. https://pages.nist.gov/pages-root/ and https://pages.nist.gov/webalglib/). The header and footer are also different colors by design.
Sure! You can check https://mdcs.nist.gov/.
Let us know if our CSS is causing the issue. I checked but it didn't seem so...
Thank you for your quick answer!
@pdessauw Sorry for the late reply. I finally found some time to look into this. Seems like issue is related to the bootstrap CSS, specifically the styling for svg tag. If you inspect the NIST svg logo you will notice the following rule for svg
svg { overflow: hidden; vertical-align: middle;
If you remove that vertical align property you will see NIST logo appear in correct format. This maybe due to the fact we use display: inline block for logo which doesn't really work with vertical align since vertical-align sets the alignment of inline-level contents with respect to their line box, not their containing block.
@pdessauw Since bootstrap is fairly common and maybe used on other pages.nist.gov sites we can also build in some protection against that on our end.
@pdessauw This should now be fixed