Portfolio - sliding scroll with nav?

1

I’ve made a portfolio page. Would appreciate feedback.

Also how do you get the page scroll when clicking on the links in the nav bar?

so far I’ve inserted anchor tags which jump to the appropriate section. And due to the fixed nav, it covers a bit of the section jumped to. Any solutions to this would be appreciated.

Thank you.

2

Hey. Seems good and responsive. You should add jQuery and the Bootstrap JS file in the pen settings, otherwise your navbar toggler won’t work.

As for the smooth scrolling, there are various ways to do that, one (using jQuery) is like this:

$('ul.nav > li > a').click(function(){
  var target = $(this.hash), // Where to scroll
      offset = 50; // Compensate for the navbar's height so it doesn't cover part of the sections
  $('html, body').animate({scrollTop: target.offset().top-offset }, 900, 'swing');
});
1 Like
3

do i put this in the html section or the javascript section?

4

Hi!

It is because the navbar is fixed.

Try using scroll-padding-top in your html or body element:
https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/

Cheers