I'm facing a small issue with HTML5 that I can't seem to figure out.
Currently, I have a header image followed by a menu div containing a nav element directly below it. My goal is to make the menu div stay fixed when scrolling down while keeping the rest of the page scrollable.
I've tried various CSS and JavaScript solutions to achieve this but haven't been successful. Can anyone help me with this problem?
//Edit1: I attempted using CSS for the header but my main focus is on making the menu overlay the header without interfering with it. I found an example that demonstrates this, but I'm having difficulty editing the code successfully:
Example Link
<body bgcolor="#FFFFFF">
<div class="wrapper">
<header>
<img src="../doc/img/cabecera.png" width="1024" height="170" alt="" />
</header>http://jsfiddle.net/kesarkes/uJsHL/embedded/result/
<!--<div class="fijado">-->
<div class="menu">
<nav align="center">
<ul>
<li id="home1"><a href="index.html">Home</a>
</li>
<li id="folio2"><a href="#b1">Folio</a>
</li>
<li id="bio3"><a href="#bioinfo">Bio</a>
</li>
<li><a href="contact.html" target="_blank">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="slideshow"></div>
<div class="fotos">
<hr id="b1"></hr>
<div class="grupo_foto"><a href="1"><div class="grupo_foto1_1"></div></a>
</div>
<!-- more code goes here -->
</div>