I'm currently working on coding a portfolio and need some assistance with creating a nav bar within my grid layout. The main challenge I'm facing is trying to have two main sections - a nav bar and the main content, where the content scrolls vertically edge-to-edge while the nav bar remains static.
The issue arises when the two sections overlap in the first row. If I adjust the z-index so that the content scrolls properly, the navbar becomes unselectable, and vice versa.
Am I approach this correctly?
In essence, I want my content to scroll smoothly in the center of the page while the nav bar stays fixed. However, their current overlapping design makes it difficult to access either one seamlessly.
When I attempted moving the content to a second row, the nav bar cut off the top portion of my content, causing an alignment issue.
I experimented with setting the nav bar as absolute positioning, but I'm hesitant as it may not adhere to conventional practices.
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr .5fr 1fr;
grid-template-rows: 1fr;
grid-area: 100%;
}
.topnav {
display: flex;
align-items: baseline;
min-height: 8vh;
margin-left: 10%;
margin-right: 10%;
grid-column: 1 / span 4;
grid-row: 1;
z-index: 1;
}
#scrollcontent {
overflow: scroll;
height: 100vh;
grid-column: 1 / span 4;
grid-row: 1;
z-index: 1;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
align-items: center;
align-content: center;
}<div class="wrapper">
<div class="topnav">
<div class="logo">
<a href="About.html">
Me
</a>
</div>
<div class="navlinks">
<a href="#work" id="work">WORK</a>
<a href="About.html" id="about">ABOUT</a>
</div>
<div id="scrollcontent">
<div class='column'>
<div class='projimg1'>
<img src="img/Hero%20image%20for%20projects(larger).png" alt="Project" class="responsive">
<div class="proj1text">
<h3>Heading</h3>
<h3>Lorem Ispem abcdefg hijklmnop</h3>
</div>
/* list of projects */
</div>
</div>
</div>