Fixed position in a responsive horizontal scrolling page design - html

Question

I'm building my portfolio site, and I have okay understanding of HTML and CSS. Right now I'm creating a horizontal scrolling page design for the first time, and I'm a bit stuck in this scenario where I want to have the heading stay fixed to the screen but have the content scroll horizontally.
I used fixed position on the header, but when I want to make the page responsive, the heading will most likely fall onto two or more lines, but since it is fixed, it is not pushing the content beneath it away. How can I achieve that a fixed div can push other content away? Should I not use fixed position, or can I target the scrolling in a different way maybe?
Screenshot of text on one line
Screenshot of the issue where the heading is not pushing away the content but overlaps, as it is fixed
.sub-page {
padding-left: 40px;
padding-top: 40px;
flex-direction: column;
}
.sub-page h2 {
margin-bottom: 16px;
position: fixed;
}
.scrolling-wrapper {
display: flex;
width: 100%;
height: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
<div class="container">
<div class="page sub-page">
<h2>Selected works</h2>
<div class="scrolling-wrapper">
<div class="list">
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
</div>
</div>
</div>
I've used this JS code for the horizontal scrolling:
https://codepen.io/nachitz/pen/LXmGzN
So what I think is happening is that the scrolling is targeting the whole page?
To make it easier I've uploaded my site so you can see it in real-time: cdn.thevoyageofdesign.com/selected-works.html

Answer 1

You can use position: sticky in place of position fixed it will push other content away from your header.
.sub-page {
padding-left: 40px;
padding-top: 40px;
flex-direction: column;
}
.sub-page h2 {
margin-bottom: 16px;
position: sticky;
top: 0;
background-color: #fff;
}
.scrolling-wrapper {
display: flex;
width: 100%;
height: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
<div class="container">
<div class="page sub-page">
<h2>Selected works</h2>
<div class="scrolling-wrapper">
<div class="list">
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
<a class="list-item"><h3>Card</h3></a>
</div>
</div>
</div>
</div>