The collapsible hamburger navbar is unresponsive and fails to collapse

Currently, I am working on a project that requires my navigation bar to be scaled down to a hamburger menu for mobile view. I have managed to do most of it, but for some reason, the navigation is not collapsing within the hamburger bar. I have been tweaking it for hours now and still haven't found the solution.

If you would like to take a look at my progress so far, here is the link to my js fiddle: https://jsfiddle.net/jr01pvkL/8/

Please note that the code might appear messy as it is part of a larger project and I am relatively new to coding.

HTML

<header>
    <nav class="floatfix nav">
        <div id="hamburgerknop">
            <span id="hamburger">&#9776;</span>
        </div>
        <ul class="main-nav">
            <li>
                <a href="#" title="Home Page">Home</a>
            </li>
            ...
        </ul>
        <ul class="icon-nav">
            ...
        </ul>
    </nav>
</header>

CSS

html {
    height: 100%;
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}
...

JQuery (in HTML footer)

jQuery(function($) {
    $('#hamburgerknop').click(function() {
        $('.nav').toggleClass('expand');
    });
});

Thank you!

Answer №1

Your function is functioning properly, but you may want to incorporate some CSS within a media query:

.main-nav {
  display: none;
}
.expand .main-nav {
  display: block;
}

Check out an example here

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

"Troubleshooting Unusual Problems with Jit.js, Jquery Json, and PHP's json_encode Function

For my current project, I decided to integrate JIT.js rgraph. Starting with the examples provided, I began incorporating the JS code into the core files of the project. Initially, everything seemed simple and straightforward. However, I recently encountere ...

Creating an email body using css and html from a file on Android - how can it be done?

After searching extensively, I have come across a plethora of solutions on how to load HTML into the body of an email intent. However, I am struggling to find a way to load a file that contains CSS and HTML content. I have a specific program in which I dis ...

Passing a value from an HTML template to a method within an Angular 4 component

Encountering an issue with Angular 4. HTML template markup includes a button: <td><a class="btn btn-danger" (click)="delete()"><i class="fa fa-trash"></i></a></td> Data is assigned to each td from a *ngFor, like {{ da ...

This error is thrown when trying to access the property 'message' of an undefined value

I'm currently working on adding an AJAX contact form to my website. However, I've run into a problem where when I try to submit the form, I encounter the following error in Google Chrome: "Uncaught TypeError: Cannot read property 'message&a ...

Pagination in the jQuery datatables plugin is not functioning as expected

Help Needed I am using the datatables jQuery Plugin to display a table, but I am facing an issue where all entries are shown without any pagination. Can someone please assist me with this problem? Below is my index.cshtml code: @{ Layout = null; } & ...

What content appears post-iframe?

After researching for a while, I've only come across information about text displayed after a broken iframe on this topic. However, what I actually want to do is display text below an iframe set at 90% height, like so: https://i.sstatic.net/KHXI3.png ...

Choose a HTML element <a> containing a hyperlink reference and a nested child element <li>

Does anyone know of a way in javascript/css to select the (n) <li> in my code, while also specifying that the <li> must have a parent with the current <a> tag containing a specific href link? <a href="www.link.com">CATEGORY NAME& ...

"Encountered a broken image while attempting to send a response with the content-type set as

Within my frontend html, I am looking to include an img element with the source link '/uploads/profilePicture'. In my node/express setup, I need to verify the user's authentication, retrieve their profile picture from the filesystem, and ret ...

Provide two variables to two different attributes using jQuery

Having an issue with Node.js and Pug engine template. In PHP(HTML), it's easy to pass two values into 2 attributes: For example, passing row[id] into the button's id and class attributes: <?php while($row = mysqli_fetch_array($result)) { ...

Implementing a JSON query with an onkeyup event listener

My main objective with this code is to trigger a json query request by using a textfield to specify the location. It's essentially a quick search feature that searches for specific content on a different website. For example, if I input www.calsolum/ ...

What is the method for modifying the appearance of the background property on an input element?

I am currently working on customizing an HTML5 video player's track bar using CSS. My goal is to utilize jQuery to modify the style of the track bar. One way I have attempted to change the background of the track bar with jQuery is by employing the f ...

Auto play feature malfunctioning in Onsen-UI Carousel attribute settings

When utilizing onsen UI in my mobile web application, I encountered an issue with the autoplay property not functioning properly within the carousel. <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button on ...

Get hexa values from a colorpicker and use them as a background in an angularjs application

I'm currently working on an angularJS project and I've implemented an HTML color picker. My goal is to assign the selected color from the color picker to my div element, ensuring that the values are in hexadecimal format. Below is a snippet of my ...

Django failing to detect empty URL configuration

Hey there! I'm new to this, and I was trying out a tutorial on py/django. The web server is up and running, but it's only showing the default page: https://i.sstatic.net/xnCrW.png Even though my urls.py has the default page set. urls.py from dj ...

Is there a way to switch tabs through programming?

Is there a way to switch between tabs using jQuery or JavaScript when using the tabbed content from ? I have tried using $("tab1").click(); I have created a fiddle for this specific issue which can be found at: https://jsfiddle.net/6e3y9663/1/ ...

Challenges associated with utilizing img src in JavaScript

I am facing a simple issue. I have carInfo data retrieved from a JSON file, but I am struggling to correctly parse the img source stored in the variable $imgsrc instead of treating it as a string called "$imgsrc". This data needs to be appended to my HTML ...

Issues creating bar graphs using HTML

I am currently working on creating a script that can display statistics from a database in the form of a bar chart. My idea is to have two colored bars stacked on top of each other, representing different values simultaneously - for example, the number of ...

Preventing special characters in an input field using Angular

I am trying to ensure that an input field is not left blank and does not include any special characters. My current validation method looks like this: if (value === '' || !value.trim()) { this.invalidNameFeedback = 'This field cannot ...

When using DataTables ajax.reload with pagination enabled, the table content jumps to the bottom of the page

I am currently using jQuery DataTables with ajax sourced data. To ensure that the data remains up to date every 30 seconds without requiring a page refresh, I have been utilizing the ajax.reload() function. To achieve this, I have placed the ajax.reload() ...

Verify in Jquery whether a table row contains no elements with a specified class before removing any duplicates

I have an HTML table: <div class="1233">hello</div> <table cellpadding="0" cellspasing="0" class="sortable zebra tablesorter tablesorter-default" id="articles-table"> <thead> <tr class="tablesorter-headerRow"> ...