0

So I want to be able to scroll through my page while hovering over a div (the header) with position: fixed;. Is there any (easy) way to do this?

I've found a similar question here, but in my case there are links (<a></a>) inside that div and those should work, so pointer-events: none; does not help in my case..

Thanks already!

This is my CSS for the header:

#header {
height: 90vh;
min-height: 80px;
max-height: 90vh;
background-color: rgb(30,30,30);

position: fixed;
top: 0;
left: 0;

box-shadow: 0 0 15px rgb(0,0,0);
z-index: 1;
}

1 Answers1

0

Hi I think you need this:

#navcontainer
{
    position:fixed;
    background:red;
    left:0;
    right:0;
    top:0;
    height:100px;
    z-index:3;
}
#navcontainer a{
float:left;
margin-right:10px;
}

.content
{
    position:relative; 
    background:green;
    left:0;
    right:0;
    padding:10px;
    top:90px;
    z-index:2;
    
}

.content .text 
{
padding:10px;
background:yellow;
}
<div id="navcontainer">
<a href="javascript:;">Menu item 1</a>
<a href="javascript:;">Menu item 2</a>
<a href="javascript:;">Menu item 3</a>
</div>
<div class="content">
 <div class="text">
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 lorem ipsum<br/>
 </div>
</div>
Manpreet Matharu
  • 80
  • 7