0

Hello fellow programmers, I am new at programming in HTML5/CSS/Javascript and I will try to make my question as clear as possible.

I've used scroll magic on my website to have the navigation links scroll to the side as you scroll down. Here is the link to the page. Nevertheless, I've realized that when I do so, I can no longer click on the images below when the nav links and my image elements (with link area on them) are at the same lateral level: the Scrollmagic link movement blocks other image links. I would like to be able to still click on both links throughout the whole parallax scrolling, even when the navigation links and the thumbnail link are at the same level.

I've attempted to: change the z value for both elements, change the .site-nav and page-nav sizes and spent many hours on it trying to edit bits and pieces to see if where the problem can be solved, but all to no avail. Here are parts of the css that I feel is where the answer belongs but I might be wrong.

CSS for parallaxed nav links:

.site-nav {
display: block;
position: fixed;
width: 100;
text-align: center;}

CSS for image thumbnail links (with link to HR images):

.page-nav {
display: block;
width: 100%;
text-align: center;
z-index: 10;
margin-top: 300px;

}

So if this sound like an easy answer for you, this would really help me out greatly. Hopefully my post is relevant and makes sense! Let me know if anything needs clarification.

user21665
  • 11
  • 3

1 Answers1

0

This isn't possible. You have an unordered list with a fixed position. The width of the list spans the entire page and will prevent you from clicking on elements that are beneath that nav container. This can be seen by using Chrome's Dev tools (see my screenshot). One thing you may want to try is reducing the width of the container after the elements have slid over to the right but that means getting more into the javascript.

Developer Tools Preview

Da Rod
  • 701
  • 5
  • 11
  • I also noticed that you set width to 100. Did you mean to set that without a unit? Or is that a mistake? – Da Rod Feb 28 '15 at 21:10
  • Thanks for you answer. Maybe a mistake, I've been editing a lot lately so it might have slipped my mind. To attempt a solution, maybe should I try to minimize the size of the list at all times? Or is that even possible if it's a fixed element? – user21665 Feb 28 '15 at 21:25
  • The sitenav container may need to span the width of the page to work correctly. As you begin to scroll it's adjusting the "left" position of each of the list elements. I actually would consider rethinking the entire navigation design. It's not really a good practice to let your navigation sit on top of your page elements like this to begin with. – Da Rod Feb 28 '15 at 21:43
  • Ok, so I'm still a newbie at this but I really want to fix it to work properly. Would you have succinct suggestions about how to rethink the navigation design? That would be incredibly helpful of you. Thanks again for the answers. – user21665 Feb 28 '15 at 22:17
  • maybe consider a sticky menu? or a menu on the right or left side that pops out when needed. http://www.smashingmagazine.com/2012/09/11/sticky-menus-are-quicker-to-navigate/ – Da Rod Feb 28 '15 at 22:33
  • i would look at a lot of site and analyze their design first, if you're really stuck on doing the parallax then check out sites that are using it and notice HOW they are using it. http://www.creativebloq.com/web-design/parallax-scrolling-1131762 – Da Rod Feb 28 '15 at 22:37
  • yeah that s exactly what I had done to figure out what I wanted (actually went on that site), but considering I was new at this, I couldn t make judgments with that implementation hindsight and I didn't want to copy other website in their navigation design...but thanks for the tips! – user21665 Feb 28 '15 at 22:53