Javascript for twitter-bootstrap's fixed navbar doesn't work when linking multiple pages?

Question

website in question

OK, i don't understand javascript or jquery so, i pose this question to you guys.

I am working on courses from FreeCodeCamp and i created a one page site that worked well in codepen . but, since i already owned a domain/hosting i moved it over (and with some extra work got it to work properly).

My issue currently is with the navbar.

On the index.html it works properly. (when targeting jumplinks on the index.html page) it scrolls down to it and gives enough space above the h1 tags so they don't get behind the navbar.

I wanted to add another link to my page for my resume (which wouldn't work with the current javascript) so i had to add a class to each of the links in my navbar that were targeting ids on the index page, and updated my javascript from it targeting all the a tags to just the a tags with the class=jumps.

So, i thought my issue was fixed, until i went to my second page xp.html. i changed the links in the navbar to be <a href="index.html#about> so that it would (hopefully) go to the index page and then jump down to the right section of the page with the jump link. but, that didn't work. it would just stay on my xp page.

So, i took the code out of the main.js file and into a index.js file, and linked it only to the index page. which allows me to now navigate properly between my two pages and the jump links, but if you are on the xp page and you click one of the jump link links, it now makes the h1 text go behind the navbar.

I hope this explanation is good?

So, i'm needing help to fix the current issue of my headers going behind my navbar when coming from my xp page (or other pages i add in the future)

I would really appreciate help with this!

Answer 1

using css and jQuery(index.js)

add a custom css in you main.css .pad-top{ padding-top:5%;} and add this in your html like this see the class

 <div  id="webfolio" class="row c-wrapper smooth nomargin pad-top"> 

and in your jQuery(index.js) replace the .top - 80 with 5

And If you use only jQuery(index.js) (If you want you can short this Query but I just share the full for understanding )

function anchorScroll(fragment) {
    "use strict";
    var amount, ttarget;
    amount = $('nav').height();
    ttarget = $('#' + fragment);
    $('html,body').animate({ scrollTop: ttarget.offset().top - amount }, 1000);
    return false;
}

function outsideToHash() {
    "use strict";
    var fragment;
    if (window.location.hash) {
        fragment = window.location.hash.substring(1);
        anchorScroll(fragment);
    }
}

function insideToHash(nnode) {
    "use strict";
    var fragment;
    fragment = $(nnode).attr('href').substring(1);
    anchorScroll(fragment);
}

$(document).ready(function () {
    "use strict";
    $("a[href^='#']").bind('click',  function () {insideToHash(this); });
    outsideToHash();
});