CODEWITHSUNDEEP
javascripthtmlcss
Samuel Zapote
Samuel Zapote

Reputation: 11

Mobile Navigation Bar is only expanding on the home page

I have basically the same navigation bar code on every page, but when its accessed on mobile i'm only able to expand the navigation bar on home.html , when i navigate to another page via the navigation bar i can no longer expand it.

Website: http://www.richardsongirlssoccer.com

JSFiddle: https://jsfiddle.net/sjvroufr/1/

$(document).ready(function() {
$("#navToggle a").click(function(e){
    e.preventDefault();

    $("header > nav").slideToggle();
    $("#logo").toggleClass("menuUp menuDown");
});

$(window).resize(function() {
    if($( window ).width() >= "600") {
        $("header > nav").css("display", "block");

        if($("#logo").attr('class') == "menuDown") {
            $("#logo").toggleClass("menuUp menuDown");
        }
    }
    else {
        $("header > nav").css("display", "none");
    }
});

$("header > nav > ul > li > a").click(function(e) {
    if($( window ).width() <= "600") {
        if($(this).siblings().size() > 0 ) {
            e.preventDefault();
            $(this).siblings().slideToggle("fast")
            $(this).children(".toggle").html($(this).children(".toggle").html() == 'close' ? 'expand' : 'close');
        }
    }
});
});

Upvotes: 0

Views: 46

Answers (1)

Dan Orlovsky
Dan Orlovsky

Reputation: 1095

It appears you're missing some javascript includes on the other pages.

Specifically: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="navigationbar.js"></script>

Here's a picture of the source on your homepage:

index.html

And here's on another page (I believe schedule.html)

schedule.html

you need to include that javascript on all the pages, and it should work.

EDIT

Your fiddle wasn't working because you didn't include jQuery. Here's a working copy of that too:

Fiddle

Upvotes: 1

Related Questions