How do I repair the functionality of my menu?

I have been coding my website over the past month in html (please don’t judge). I do not know how to code with php and databases yet. so the problem I have is…

I tested every link and function throughout the entire process on my laptop using firefox to live preview my files and it was all working perfectly. Uploaded my files to my domain last night and for some reason the last file in my menu tree flakes out. The moment I click on the menu link it adds #menu at the back of the page address but does not open up the menu.

I don’t know if this will help.

This is an overview of the path tree on the site…

Primary – https://www.jaegerprojects.co.za/generator.jaegerprojects.co.za/index.html – menu works

Secondary – https://www.jaegerprojects.co.za/generator.jaegerprojects.co.za/generators/generators.html – menu works https://www.jaegerprojects.co.za/generator.jaegerprojects.co.za/generators/phases.html – menu works https://www.jaegerprojects.co.za/generator.jaegerprojects.co.za/generators/diesel2.html – menu works https://www.jaegerprojects.co.za/generator.jaegerprojects.co.za/generators/BPD20S3.html – menu doesn’t work

The exact same menu has been used through the entire site. Used a template.

This is the HTML code for the header and nav –

HTML:

    <!-- Header -->
                <header id="header" class="alt">
                    <div class="logo"><a href="http://www.jaegerprojects.co.za"><img src="images/logo.png" height="45px" alt="Jaeger Projects" /></a></div>
                    <a href="#menu">Menu</a>
                </header>
    
            <!-- Nav -->
                <nav id="menu">
                    <ul class="links">
                        <li><a href="index.html">Home</a></li>
                          <li><a href="about.html">About Us</a></li>
                          <li><a href="generators/generators.html">Generators</a></li>
                        <li><a href="solar/solar.html">Solar</a></li>
                        <li><a href="information.html">Information</a></li>
                        <li><a href="contact.html">Contact Us</a></li>
                    </ul>
                </nav>

And this is the js I can spot for the menu...

JavaScript:

// Menu.
            $('#menu')
                .append('<a href="#menu" class="close"></a>')
                .appendTo($body)
                .panel({
                    delay: 500,
                    hideOnClick: true,
                    hideOnSwipe: true,
                    resetScroll: true,
                    resetForms: true,
                    side: 'right'
                });

Answer

Looking at the website source and the errors that show up in the console, there’s an error in the way you’re referencing your scripts in your last page:

<!-- <script src="../assets/js/jquery.min.js"></script> -->
<script src="../../js/jquery-1.11.3.min.js"></script>

You are not importing jQuery correctly. It should work if you just uncomment the commented line and delete the reference to jquery-1.11.3.min.js:

<script src="../assets/js/jquery.min.js"></script>

Advertisement

Answer