This is a very strange problem I've encountered. Everytime I add more content to the main content the sidenav links aren't able to be clicked on. Here is an example of the sidenav without main content:
<style>
div.sidenav {
width: 240px;
position: absolute;
z-index: -1;
top: 110px;
left: 10px;
background: transparent;
overflow-y: scroll;
overflow-x: hidden;
padding: 8px 0;
border-style: dashed; color: #28eb4c;
text-align: center;
}
div.sidenav a {
padding: 1px 2px 1px 10px;
text-decoration: none;
font-size: 25px;
color: #ed7eeb;
display: block;
}
div.sidenav a:hover {
color: #e3a8e2;
}
div.main {
margin-left: 240px;
padding: 10px 10px;
}
</style>
</head>
<body>
<h1>A Test</h1>
<div class="sidenav">
<h2>Links</h2>
<a href="https://www.youtube.com/"> YouTube</a>
<a href="https://www.twitter.com/"> Twitter</a>
</div>
<div class="main">
<h2>Some text</h2>
</div>
</body>
Here is an example with main text:
<style>
div.sidenav {
width: 240px;
position: absolute;
z-index: -1;
top: 110px;
left: 10px;
background: transparent;
overflow-y: scroll;
overflow-x: hidden;
padding: 8px 0;
border-style: dashed; color: #28eb4c;
text-align: center;
}
div.sidenav a {
padding: 1px 2px 1px 10px;
text-decoration: none;
font-size: 25px;
color: #ed7eeb;
display: block;
}
div.sidenav a:hover {
color: #e3a8e2;
}
div.main {
margin-left: 240px;
padding: 10px 10px;
}
</style>
</head>
<body>
<h1>A Test</h1>
<div class="sidenav">
<h2>Links</h2>
<a href="https://www.youtube.com/"> YouTube</a>
<a href="https://www.twitter.com/"> Twitter</a>
</div>
<div class="main">
<h2>Some text</h2>
<p>
Lorem ipsum dolor sit amet. In aperiam magnam in quod aliquam ut dolor reprehenderit nam modi fugit ab sunt harum et alias amet. Aut alias magni et perferendis molestias ut veritatis explicabo qui rerum reprehenderit?
</p>
<p>
Ut pariatur soluta ea exercitationem nisi in optio ratione 33 totam modi et ipsam natus? Vel eius suscipit eos voluptatem nihil ut adipisci alias aut quos dolor quo soluta velit.
</p>
<p>
Voluptatibus necessitatibus labore eius ea internos quos est ullam alias. Eum ratione optio At facere nulla id accusamus pariatur vel sint omnis sit omnis eveniet in laudantium debitis. Ut architecto corrupti eum consequuntur odio qui illo numquam aut inventore fuga aut laboriosam atque. Et odio molestiae et incidunt enim qui doloribus nihil?
</p>
</div>
</body>
Maybe I messed something up with the <style> section? I mostly don't really know what is happening around there, especially with margins and padding and maybe I've overridden the margins with the main body. I have also seen examples of sidebars made as an entirely different html page within another, and maybe that could help. If you could also help me figure out how to fix the sidebar as well as make it scrollable instead of it filling the whole page, that would be appreciated, thanks.
The z-index property specifies the stack order of an element: