In my project, I am utilizing angular with bootstrap. The header of the project consists of two parts and a content area. However, when the resolution is small, the header wraps.
Check out the header and content on large screens
View the header and content on small screens, wrapped
<div class="sticky row">
<div class="col-md-7" style="height: 50px; background-color: seagreen;">
Header A
</div>
<div class="col-md-5" style="height: 50px; background-color: skyblue;">
Header B
</div>
</div>
<div style="height: 1500px; width: 100%; background-color: slategray;">
any content<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
The header has been made sticky so that the content flows beneath it.
.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0px;
}
Everything seems to be working well, as evidenced by this Stackblitz demo: Check it out here
However, for smaller screens, I want Header B to scroll beneath Header A without being sticky. Since both headers are within one div, I am unsure if there is a way to achieve this while maintaining the wrapping of the header.
Any insights or ideas would be greatly appreciated. Thank you!