I've been diving into HTML, CSS, and jQuery to enhance my personal website.
However, I've encountered an issue when trying to implement larger menus - they don't display properly when scrolling, and I can't seem to pinpoint the reason.
The easiest way to showcase the problem, especially since I lack technical jargon knowledge, is by providing a visual:http://jsfiddle.net/jcml/kmxdo4ha/
Deciding which part of the code to share without overwhelming anyone is an obstacle.
After some investigation, I have identified two main issues:
1 - While scrolling up or down, the entire menu isn't visible (and must stay vertically centered as the menu changes in height dynamically).
2 - The menu.ico icon also scrolls and could become hidden once the menu is closed.
Edit: I managed to solve problem #1, but now the vertical centering of the menu is disrupted after removing this snippet from the code:
.links ul{
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
Edit2: You might notice the menu.ico issue if you open the menu, scroll all the way down, then close it. To fix it, you'll need to hover over the button and scroll back up for it to display properly.
Edit3: Problem #2 seems to have a solution, albeit requiring significant changes to the website structure. Nevertheless, it's good practice to make such improvements!