Currently in the process of constructing my portfolio site, I have a decent grasp of HTML and CSS. I am exploring a new design concept for a horizontal scrolling page but have hit a roadblock. My dilemma lies in achieving a fixed heading while allowing the content to scroll horizontally.
Initially, I tried using a fixed position for the header. However, if the screen size changes causing the heading to span multiple lines, it does not push the content below it away as intended. How can I ensure that a fixed div pushes other content aside? Should I reconsider using fixed positioning, or is there another way to address this issue?
Visual representation of text on a single line
Illustration of the problem where the fixed heading overlaps with the content instead of pushing it away
.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>
Incorporated JS code for horizontal scrolling: https://codepen.io/nachitz/pen/LXmGzN
It seems like the scrolling effect may be affecting the entire page?
Provided access to my live site to offer real-time insight: cdn.thevoyageofdesign.com/selected-works.html