top nav bar blocking top content of the page

Answer 1

The best solution I've found so far, that does not involve hard coding heights and breakpoints is to add an extra tag to the markup.

    Navbar


    Navbar

By doing it this way the @media breakpoints are identical, the height is identical (provided your navbar-brand is the tallest object in the navbar but you can easily substitute another element in the non fixed-top navbar.

Where this fails is with screen readers which will now present 2 navbar-brand elements. This points at the need for a not-for-sr class to prevent that element from showing up for screen readers. However that class does not exist https://getbootstrap.com/docs/4.0/utilities/screenreaders/

I've tried to compensate for the screen reader issue with aria-hidden="true" but https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ seems to indicate this will probably not work when the screen reader is in focus mode which is of course the only time you actually need it to work...