The mobile menu functions correctly on Jfiddle but is not functioning on the local server

I was working on a responsive mobile menu and used a toggleClass function to open the menu. It's functioning correctly in Jfiddle and below, but every time I click the nav icon in the live preview within brackets, nothing happens. I even tried it in a new blank brackets project, but still no luck.

Code available in Jfiddle as well as below

Your assistance is greatly appreciated. Thank you for your time!

https://jsfiddle.net/TonyTheOnly/7ha214r0/1/

$(document).ready(function(){
    
        $(".burger-nav").on("click", function(){
            
            $("nav ul").toggleClass("open");
        });
});
header {
    background: white;
    padding-bottom: 20px;
}


nav {
    float: right;
    padding-right: 10%;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-left: 35px;
    padding-top: 25px;
    position: relative;
}

nav a {
    color: #444;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 24px;
}

nav a:hover {
    color: #000;
}

nav a::before {
    content: '';
    display: block;
    height: 10px;
    width: 0%;
    background-color: #444;
    position: absolute;
    top: 0;
    transition: all ease-in-out 150ms;
}

nav a:hover::before {
    width: 100%;
}
@media only screen and (max-width:480px) {
    .burger-nav{
    display: block;
    height: 40px;
    width: 40px;
    float: right;
    background: url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png");
    background-size: cover;
    cursor: pointer;
    }
    
   .wrapper {
        width: 100%;
        padding: 0;
    }
    
     nav ul {
        overflow: hidden;
        background: white;
        height:0;
        
    }

    nav ul.open {
        height: auto;
    }
     nav ul li{
        float:none;
        text-align: left;
        width: 100%;
        margin: 0;
        
    }
    nav ul li a {
        color: black;
        padding: 10px;
        display: block;
        margin: 0;
    }


}

@media only screen and (max-width:1050px) {
     
    .burger-nav{
    display: block;
    height: 40px;
    width: 40px;
    float: right;
    background: url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png");
    background-size: cover;
    cursor: pointer;
    }
    
   .wrapper {
        width: 100%;
        padding: 0;
    }
    
     nav ul {
        overflow: hidden;
        background: white;
        height:0;
        
    }

    nav ul.open {
        height: auto;
    }
     nav ul li{
        float:none;
        text-align: left;
        width: 100%;
        margin: 0;
        
    }
    nav ul li a {
        color: black;
        padding: 10px;
        display: block;
        margin: 0;
    }   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Responsive menu</title>  
   <div class="container">
    <nav>
       <a class="burger-nav"></a>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    </div>

Answer №1

Does this meet your requirements? It's functioning properly on my local server, where I consolidated everything into a single file named index.php.

Ensure that you are calling your CSS and JS files correctly, attempt a forced browser refresh with ctrl F5, and confirm that you have an active internet connection. Also, please note that I prefer using Sublime Text over Brackets as it is easier for me to navigate.

https://i.sstatic.net/dTQO6.png

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Responsive menu</title>  
   <div class="container">
    <nav>
       <a class="burger-nav"></a>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    </div>


<script type="text/javascript">
        $(document).ready(function(){

        $(".burger-nav").on("click", function(){

            $("nav ul").toggleClass("open");
        });
});
</script>


<style type="text/css">

header {
    background: white;
    padding-bottom: 20px;


}


nav {
    float: right;
    padding-right: 10%
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;

}

nav li {
    display: inline-block;
    margin-left: 35px;
    padding-top: 25px;

    position: relative;

}

nav a {
    color: #444;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 24px;
}

nav a:hover {
    color: #000;

}

nav a::before {
    content: '';
    display: block;
    height: 10px;
    width: 0%;
    background-color: #444;

    position: absolute;
    top: 0;
    transition: all ease-in-out 150ms;
}

nav a:hover::before {
    width: 100%;
}
@media only screen and (max-width:480px) {

    .burger-nav{
    display: block;
    height: 40px;
    width: 40px;
    float: right;
    background: url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png");
    background-size: cover;
    cursor: pointer;
    }

   .wrapper {
        width: 100%;
        padding: 0;
    }

     nav ul {
        overflow: hidden;
        background: white;
        height:0;

    }

    nav ul.open {
        height: auto;
    }
     nav ul li{
        float:none;
        text-align: left;
        width: 100%;
        margin: 0;

    }
    nav ul li a {
        color: black;
        padding: 10px;
        display: block;
        margin: 0;
    }


}

@media only screen and (max-width:1050px) {

    .burger-nav{
    display: block;
    height: 40px;
    width: 40px;
    float: right;
    background: url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png");
    background-size: cover;
    cursor: pointer;
    }

   .wrapper {
        width: 100%;
        padding: 0;
    }

     nav ul {
        overflow: hidden;
        background: white;
        height:0;

    }

    nav ul.open {
        height: auto;
    }
     nav ul li{
        float:none;
        text-align: left;
        width: 100%;
        margin: 0;

    }
    nav ul li a {
        color: black;
        padding: 10px;
        display: block;
        margin: 0;
    }   
}
</style>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Datatables stands out by emphasizing rows across all paginated pages

Encountering an issue with the Datatables plugin when attempting to highlight rows on paginated pages beyond the first one. In the JavaScript code below, you can see where I have commented out adding the class info to all rows. When this is done and you n ...

Struggling to generate package using manifoldjs

Excited to dive into the new tool called ManifoldJS introduced by Microsoft at Build 2015, I'm facing some challenges. My website is up and running as a basic HTML- and JS-based app using Angular and TypeScript. I've even created a manifest.json ...

Unable to extract all elements using simple HTML dom when parsing RSS feed

I've been attempting to extract various details like titles, descriptions, links, images, and dates from an RSS feed located at . However, for some reason, I am unable to retrieve the link tag and image source within the feed. The rest of the data ext ...

Issue with data interpretation between jQuery and Java

My character encoding is currently set to ISO-8859-1. I'm utilizing an AJAX call with jQuery.ajax to communicate with a servlet. After serialization by jQuery, the URL appears as follows: https://myurl.com/countryAndProvinceCodeServlet?action=getPro ...

Encountering a "map is not a function" error in REACT following the use of the push method

After pushing an element to an array in a function (event), I encountered the following error: handleAddList(s) { this.setState({lists :this.state.lists.push(s)}); console.log(this.state.lists); } The error message says "lists.map is not a function. ...

Responsive HTML grid with a distinct line separating each row

My challenge is to create a layout that features a grid of floating divs with horizontal lines under intermediate rows. The catch is that there should not be a line under the last row, and if there is only one row of elements, no line should be displayed. ...

How can I add a comma after every third number in a react component?

I am currently developing an input feature where I need to insert a comma after every 3 numbers, such as (352,353,353). The challenge is to display this format in a text field. Since I am new to working with React, I would appreciate any guidance on how to ...

What are some effective ways to align an image to the left and text to the right within a table

I need to display a member with a higher rank, showing the user image along with their username. However, I am struggling to align the image and text properly due to varying username lengths causing them to appear in a zig-zag position. Here is what I hav ...

The submit button remains disabled even after verifying all the required fields

I have a registration form with basic customer details and a Submit button. I have successfully validated all the fields using Ajax, except for the Confirm password field which is being validated using JavaScript. The issue I am facing is that when I val ...

How can JavaScript routes be used to apply specific code to multiple pages on a website?

Can you provide guidance on how to run the same code for multiple pages using routes? Below is an example I am currently exploring: var routeManager = { _routes: {}, // Collection of routes add: function(urls, action) { urls.forEach(fun ...

Searching with Jquery Ajax

For my search functionality, I am utilizing ajax jquery js. I found this useful code snippet here: However, I am facing some challenges with the following Javascript code: <script language="JavaScript" type="text/javascript"> <!-- function searc ...

Is it a bad idea to incorporate JavaScript functions into AngularJS directives?

I came across this snippet of code while working with ng-repeat: <div ng-show="parameter == 'MyTESTtext'">{{parameter}}</div> Here, parameter represents a string variable in the $scope... I started exploring if it was possible to c ...

Vue.js Interval Functionality Malfunctioning

I'm brand new to Vuejs and I'm attempting to set an interval for a function, but unfortunately it's not working as expected. Instead, I am encountering the following error: Uncaught TypeError: Cannot read property 'unshift' of u ...

Dealing with the validation of two forms on a single webpage: Strategies and Solutions

In a popup, there are two forms that alternate display - one for editing (loaded via ajax) and one for creation. Using jQuery validation, I aim to show hints for both editing and field submission. The validation includes ensuring time spans do not overla ...

The datepicker in Angular Material refuses to open when used within a modal dialog box

I successfully integrated an angular material 2 date-picker into a bootstrap modal form: <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">{{title}}</h ...

retrieve scanned image information with node.js

Hey, I'm currently dealing with an issue that involves a form containing various types of questions such as boolean and text field answers. The user fills out the form, scans it, then uploads it to a node.js server. The node server will extract answe ...

Verify that the select field has been chosen using Protractor

Currently, I am in the process of developing a test that places importance on whether a select field has already been populated. it('should automatically select a field if it hasn't been selected previously', function() { var usersField = ...

Dark opaque background image with Material-UI styling

I'm enclosing all the widgets within a CardMedia component, and adding an image. return ( <CardMedia image={bg} className={classes.bg}> <main className={classes.content}> <div className={classes.toolbar} /> <Grid contai ...

Issue encountered when sorting sequelize query by date in ascending sequence

My challenge is to arrange a sequelize query in ascending order by date. Specifically, I am focusing on sorting the results of the model: ExamScore (referred to as student_score). I've specified the column "updated_at" for ordering and the method of ...

Is it advisable to use an autosubmit form for processing online payments?

Situation: In the process of upgrading an outdated PHP 4 website, I am tasked with implementing an online payment system. This will involve utilizing an external payment platform/gateway to handle transactions. After a customer has completed their order ...