Bootstrap 4 page wide header bar above navbar

Question

I have a working navbar, but how to get a pagewide bar above the navbar (Pagewide div). In mobile view the bar can disappear.

Answer 1

The fixed-top navbar is always on top.

To put your header bar above it, determine how tall you want the pagewide bar, and set the top: space above the fixed navbar. Use a media query to hide on smaller screens.

https://www.codeply.com/go/bembG1Lulg

@media (min-width: 992px) {
    .navbar {
        top: 54px;
    } 

    .pagewide {
        height: 54px;
    }
}