nav.html

<script>
    var lastNavState;
    var firstTime = true;
    function navAddBackground() {
        if(lastNavState==false || firstTime){
            $("#nav-placeholder").addClass("bg-dark");
        }
        lastNavState = true;
        firstTime = false;
    }

    function navRemoveBackground() {
        if(lastNavState==true || firstTime){
            $("#nav-placeholder").removeClass("bg-dark");
        }
        lastNavState = false;
        firstTime = false;
    }


    var pathname = window.location.pathname;

    $("#nav-placeholder .navbar-nav").children().each(function () {
        var navLink = $(this).children().attr("href");
        if ((pathname.indexOf(navLink.split("#")[0]) >= 0) || (navLink.indexOf("index.html")>=0  && pathname == "/")) {
            $(this).children().attr("href", "#"+navLink.split("#")[1]);
            $(this).children().attr("uk-scroll", "true");
        }
    });

    if ((pathname.indexOf("index.html") >= 0) || pathname == "/") {
            $(".navbar-brand").attr("href", "#top");
            $(".navbar-brand").attr("uk-scroll", "true");
    }

    // console.log(window.location.pathname)
    $(".navbar-toggler").click(function () {
        if ($(window).scrollTop() > 100 || $(".navbar-toggler").hasClass("collapsed"))
            navAddBackground();
        else
            navRemoveBackground();
    });

    if ($(window).scrollTop() > 100)
		navAddBackground();
	else
		navRemoveBackground();

    $(window).scroll(function () {
    if ($(window).scrollTop() > 100 || !$(".navbar-toggler").hasClass("collapsed"))
      navAddBackground();
    else
      navRemoveBackground();
    });
    
</script>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarToggler">
    <span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html#top">
    <!--<img src="/images/logo/nav-logo.png" width="100" height="60"
        class="d-inline-block align-top" alt="">-->
    <img src="/images/logo/nav-logo-2.png" style="height: 40px;"
        class="d-inline-block align-top" alt="">
</a>
<div class="collapse navbar-collapse" id="navbarToggler">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="index.html#top" offset="50">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="index.html#about" offset="50">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="index.html#events" offset="50">News</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="index.html#competitions" offset="50">Competitions</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="index.html#sponsors" offset="50">Sponsors</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="index.html#contact" offset="50">Contact</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="events.html#top" offset="50">Events</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="team.html#top" offset="50">Team</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="gallery.html#top" offset="50">Gallery</a>
        </li>
    </ul>
</div>