Having trouble with my code on this fiddle: https://jsfiddle.net/0vau6psp/. It seems to be related to the position:fixed property, but I can't seem to solve it.
The issue is that the header is overlapping the main content, making it invisible. I want the content to appear below the header instead.
If anyone could provide some guidance, it would be greatly appreciated! Here's a snippet of my code for reference:
HTML:
<header class="site-header" >
<div class="header-main" id="header-flow">
<div class="container-fluid header-cont-top-nav">
<div class="row">
<div class="col-md-5 text-right hidden-xs hidden-sm">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div><!--/.container-->
</div><!--/.header-main-->
</header>
<main class="site-main-content" id="mainscrollcontent">
<p>
{{ content_for_layout }}
Test
Test Content
Test Content line 4
</p>
</main>
CSS:
#header-flow {
border-bottom: #73b2b2 3px solid;
z-index: 1000;
background-color: #fff;
position: fixed;
width: 100%;
}
#header-flow li{
display:inline-block;
}
.site-main-content {
margin-bottom: 0;
display:block;
}