The navigation/hamburger icon vanishes after a click on a page link

I'm in the process of creating a single-page scrolling website. However, I am encountering an issue with the navigation bar. Specifically, when I click on a page link from the nav bar at screen widths less than 780px (when the hamburger icon appears), the hamburger icon disappears. The only way to get it back is by refreshing the page. Additionally, I have noticed that the nav bar disappears at full-screen width after clicking on a page link once. I would like to find a solution that allows me to keep the hamburger icon and top navigation visible at all times. The JavaScript code I am using to collapse the full-screen menu at 780px is causing this problem, but it is necessary for the menu to function correctly. If anyone has any suggestions or can offer assistance, I would greatly appreciate it!

$(document).ready(function() {
    $('a').click(function() {
        $('#menu').slideToggle();
    });
});
@media screen and (max-width: 780px) {

    nav {
        width: 100%;
        margin: 0;
        padding: 0;
        position: relative;
        left: 0;
        display: block;
        opacity: 1.0 !important;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    }

    nav ul {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        display: none;
        float: none;
    }

    nav ul li {
        font-size: 1.3em;
        font-weight: normal;
        line-height: 40px;
        width: 100% !important;
        margin: 0;
        padding: 0;
    }

    nav ul li:nth-of-type(1) { margin-top: 20%; }

    nav ul li:hover { background: #565758; }
    
    nav ul li a {
        color: white !important;
        font-family: "Lato", sans-serif;
        border-bottom: none !important;
        display: inline-block;
    }

    nav ul li a.active-link {
        color: white !important;
        font-size: 1.3em;
    }

    nav ul li a:hover {
        color: white;
        width: 100%;
    }
        
    /*Display 'show menu' link*/
    .show-menu {
        margin: 0 !important;
        padding: 1em !important;
        text-align: right;
        display: block;
        float: right;
    }

    /*Show menu when invisible checkbox is checked*/
    input[type=checkbox]:checked ~ #menu { background-color: #747475 !important; display: block; height: 100vh; }
}​
<header>
    <nav>
        <label for="show-menu" class="show-menu"><img src="hamburger.png" alt="Hamburger Menu Icon" style="width: 15%;"></label>
        <input type="checkbox" id="show-menu" role="button">
        <ul id="menu">
            <li><a href="#choco">HOME</a>
            <li><a href="#about-page">ABOUT</a></li>
            <li><a href="#portfolio-page">PORTFOLIO</a></li>
            <li><a href="#contact.html">CONTACT</a></li>
        </ul>
    </nav>
    <div id="logo"><img src="logo-grey.png" alt="Logo" style="max-width:100%; height:auto;"></div>
</header>​

javascripthtmlcss

Answer №1

To ensure the checkbox works accordingly, you must also incorporate the toggle function. This jQuery function utilizes specific animations and styles.

$('#show-menu').click(function() {
    $('#menu').slideToggle();
});

UPDATE

I have provided a functional demonstration without using toggle for improved design aesthetics. Now, the menu toggles with the checkbox click event :-)

$(document).ready(function() {
    $('a').click(function() {
        $('#menu').slideToggle();
    });
  $('#show-menu').change(function() {
      if(this.checked)
        $('#menu').slideDown();
      else
        $('#menu').slideUp();
  });
});
@media screen and (max-width: 780px) {

    nav {
        width: 100%;
        margin: 0;
        padding: 0;
        position: relative;
        left: 0;
        display: block;
        opacity: 1.0 !important;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    }

    nav ul {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        display: none;
        float: none;
    }

    nav ul li {
        font-size: 1.3em;
        font-weight: normal;
        line-height: 40px;
        width: 100% !important;
        margin: 0;
        padding: 0;
    }

    nav ul li:nth-of-type(1) { margin-top: 20%; }

    nav ul li:hover { background: #565758; }
    
    nav ul li a {
        color: white !important;
        font-family: "Lato", sans-serif;
        border-bottom: none !important;
        display: inline-block;
    }

    nav ul li a.active-link {
        color: white !important;
        font-size: 1.3em;
    }

    nav ul li a:hover {
        color: white;
        width: 100%;
    }
        
    /*Display 'show menu' link*/
    .show-menu {
        margin: 0 !important;
        padding: 1em !important;
        text-align: right;
        display: block;
        float: right;
    }

    /*Show menu when invisible checkbox is checked*/
    input[type=checkbox]:checked ~ #menu { background-color: #747475 !important; display: block; height: 100vh; }
}​
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <nav>
        <label for="show-menu" class="show-menu"><img src="hamburger.png" alt="Hamburger Menu Icon" style="width: 15%;"></label>
        <input type="checkbox" id="show-menu" role="button">
        <ul id="menu">
            <li><a href="#choco">HOME</a>
            <li><a href="#about-page">ABOUT</a></li>
            <li><a href="#portfolio-page">PORTFOLIO</a></li>
            <li><a href="#contact.html">CONTACT</a></li>
        </ul>
    </nav>
    <div id="logo"><img src="logo-grey.png" alt="Logo" style="max-width:100%; height:auto;"></div>
</header>​

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

Incorporating a hyperlink within a list item for an image

Currently, I am attempting to create a clickable image within an unordered list. Although the paragraph is clickable, unfortunately, the image itself is not responding as expected. <ul> <a href="/movies/test/"><li> ...

htmlcss

What is the reason for the ul selector not functioning in the attached CSS file?

I attempted to create a navigation bar by using the code below. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body class="background"> <ul> <li>Home</li> <li>Ne ...

csshtmlcss-selectors

What strategies can I use to optimize the code for the function provided?

This function allows for the dynamic display of select tags for location selection based on employee designation. The current code functions correctly, but I believe it can be optimized further. // Function to activate different location options based on e ...

javascript

Gaps separating frames

<!Doctype html> <html> <frameset rows="26%,24%,*" noresize border="0" frameborder="no" framespacing="0"> <frame src="frame_a.html" target="_self" name="logo" scrolling="auto"> <frame src="frame_b.html" target="_self" name="menu" ...

htmlcss

When scrolling, apply a CSS class to a div element once it becomes visible on the

I'm in the process of developing a timeline feature for my website, and I am facing an issue where the addClass function is being applied to all sections, even those that are not currently visible on the screen during scrolling. If you would like to ...

javascriptjqueryhtmlcss

Column Flow in CSS Grid: Maximizing Auto-Fit - How to Optimize Row Layouts?

Having some trouble understanding how auto-fill and fit work in grid layouts. I am familiar with basic CSS, but new to working with grid layouts. I have a set of checkbox items with labels that I want to display in columns depending on screen size, with c ...

csscss-gridgrid-layout

Crafting an interactive saturation effect for mouseover interactions in a circular design

I'm looking to create a unique hover effect for my images. I have both a desaturated version and a full color version of the same image. My idea is to have mousing over the desaturated image reveal a circle spotlighting the color version underneath, a ...

javascriptjquerycssanimationmouseover

Utilize the jQuery autocomplete UI Widget to trigger a select event on a dynamically generated row in a table

Currently, I have successfully implemented a jQuery autocomplete feature on the text input of a table data element called txtRow1. The data for this autocomplete is fetched remotely from a MySQL database and returned in JSON format as 'value' for ...

javascriptjqueryhtmljquery-ui

Encountered an Uncaught ChunkLoadError with Vercel Next.js: Chunk 0 failed to load

Upon removing the node modules and package-lock.json files, I encountered the error mentioned above when attempting to reload any page. The project works fine after being restarted for the first time. However, upon reloading the page again, it displays a b ...

javascriptreactjsnext.jsvercel

What is the best way to set the `value` attribute and `v-model` attribute for a custom Vue component?

I am seeking to develop a unique Vue component that functions as a "radio div" - essentially, a div with the ability to act like a radio button where only one among multiple can be selected at a time. The div will also have a slot for including any desired ...

javascriptvue.jsvuejs2

Exploring JavaScript and Node.js: Deciphering the choice of prototype.__proto__ = prototype over using the

Currently exploring the Express framework for node.js and noticed that all the inheritance is achieved through: Collection.prototype.__proto__ = Array.prototype; Wouldn't this be the same as: Collection.prototype = new Array; Additionally: var ap ...

javascriptnode.jsexpress

Node Signature Generation for Gigya Comment Notifications

I am currently using the Gigya Comment Notification service within my node application and attempting to generate a valid signature. Despite following the documentation, my code is producing an incorrect hash. Below is the code I am using: var crypto = r ...

javascriptnode.jsgigya

Preserve the output from the jQuery ajax request

I have created a custom function that calls an ajax request and saves the response data to a variable before returning it. It always shows '0' as the return value, but the alert displays numbers like 3712. Below is the implementation of the func ...

javascriptajaxjquery

Step-by-step guide on redirecting to a different page following a successful POST API call using Jquery

I have the code below in my JavaScript file. $scope.addLookupAction = function () { $("#importForm").attr("action", 'xyz.com'); success:function(response) { $log.info("Redirecting to lookup home page"); ...

javascriptjqueryangularjs

Remove the scrollbar from the iframe and instead display a scrollbar on the page in its place

Currently, I am facing an issue with the vertical scrollbar on an iframe. I want to remove it so that the scrollbar appears on the main page instead. This way, I will be able to scroll the content of the iframe using the page's scrollbar. I managed to ...

javascriptjquerycssiframescrollbar

Transition delays in Tailwind CSS when dark mode is activated

My dark mode toggle is functioning with the following CSS: :root { --primary: var(--white); } .dark { --primary: var(--black); } However, when I include the following code: * { @apply transition-colors duration-700; } The background colors of ...

csstailwind-css

Troubleshooting issue with changing label text using innerHTML in JavaScript

In need of some advice regarding a javascript function I've been working on: function validateFile() { var file = document.getElementById('fuCSV'); if (file.value == "") { document.getElementById(&apo ...

javascriptasp.netc#-4.0

I am currently working on determining whether a given string is a palindrome or not

I'm currently working on a function that checks whether a given string is a palindrome. So far, my tests are passing except for the following cases: (_eye, almostomla, My age is 0, 0 si ega ym.) This is the function I've implemented: function pa ...

javascript

Adjust the styling with jQuery according to the selected value from the dropdown menu

Check out this Fiddle I have a jQuery script that is supposed to change the style of an input box to display:block if the selected value is "<>" (Between). However, currently it is changing the css for all selected items instead of just the target i ...

javascriptjqueryhtmlcss

Combine multiple form values to calculate the total sum

To tackle the issue of adding up independent totals in a PHP foreach loop and displaying a grand total, we need to modify the JavaScript function. Right now, the function works fine for each line, but doesn't calculate the grand total correctly. Let&a ...

javascript