Nav with position fixed gets over slideshow when smoothscolling

[wristcutter69]

Unfortunetly, everytime the anchor that leads to my slideshow is trespassed by the nav, the nav covers the Slideshow, just like in the codepen example on the “My Projects link” in my project.

I would like the scrolling between the nav and the anchor to be like this: [IMG]http://i63.tinypic.com/2a8gi8y.jpg[/IMG]

I would greatly apreciate some help regarding this litle issue. Here is my codepen:

I finally managed to get smooth scrolling woking on my website, but unfortunetly, everytime the anchor that leads to my slideshow is trespassed by the nav, the nav covers the Slideshow, just like in the codepen example on the “My Projects link” in my project.

I would like the scrolling between the nav and the anchor to be like this: [IMG]http://i63.tinypic.com/2a8gi8y.jpg[/IMG]

I would greatly apreciate some help regarding this litle issue. Here is my codepen: http://codepen.io/wristcutter69/pen/zZNqpo/”l

[Shikkediel]

I’ve spent about ten minutes trying to figure out which approach was taken for the smooth scrolling. That was pretty much the time limit… it would have been good to explain this in your post beforehand.

[wristcutter69]

Sorry I’ll be more carefull about those things, and I’ll make sure I describe it better when I have time to edit my first post, however, my smoothscool effect doesn’t matter since the issue of the nav being over the slider and covering the content has been there even before I implemented the smooth scrolling effect.

[Shikkediel]

I would think it does matter, the smooth scrolling mechanism determines where to scroll to…

Anyway, I think it’s a matter of adding some padding to the section:

section.slideshow {
padding-top: 70px;
}

[Shikkediel]

Hmm… something’s wrong with the characters to add a code box.

“`
Hello world
“`

`Hello world`

[wristcutter69]

Welp
The CSS-Trick works(I had actually tried to use that padding trick some months ago,I had even applied it to the other sections as it looked neat so I kept it that way), but it isn’t the most aesthetically pleasing to me on the slider section, I would like it to work without “hammering down” the spacing and do it the best and most examplary way possible, I heard that the spacing could be done with javascript… I don’t know. I dont want to sound ungratefull and lame but I think it could be done in a diferent and more straight way (thats my usual designer paranoia with perfection), but I don’t know how.

Thank you.

[Shikkediel]

It must’ve been late the first time I checked… I could swear it was doing a smooth scroll. Did you not include it in the pen then? If not, your comment must have put me in a cognitively dissonant state. And looking for the mechanism was rather useless.

:-/

> I finally managed to get smooth scrolling woking on my website

So if I understand correctly, your question is how to do a smooth scroll with JS?
Would jQuery be an option?

[wristcutter69]

No, I already did my smooth scrolling effect which is working perfectly and without problems, I just didnt share the code.

I was bad at explaining my issue… the thing that is currently bothering me on my website, is that, because my nav with a fixed position has a tendency to stand over the sections (where I fixed that problem doing the padding trick that you mentioned above) instead of simply fitting a reserved space before the section (namely my slider section), it ruins a bit the design on that part of my website.

I simply want my nav to stand above my slider without covering it and I’d like to know if it is possible to do it without padding tricks.

I am sorry for the confusion I’ve caused :(

[Shikkediel]

I am not aware of any other CSS solution so I think you’ll need JS.
Very easy with jQuery, a vanilla approach would need some plugin…

[Author]

Posts