Utilizing media queries and JQuery to display a variety of menus based on screen

I have created a hamburger menu specifically for smaller screens, and it is functioning properly on small screens. However, I am facing an issue where if the menu is not open before resizing the screen to a larger size, the menu does not show at all. When the screen is already larger and I refresh the page, the menu appears as expected. I am looking for a solution where the menu switches in real time when the screen reaches a media query breakpoint, displaying the full menu on larger screens.

Currently, I am using JQuery to handle the show/hide functionality of the menu.

https://jsfiddle.net/fabfivefebby/87rywxxv/

var $hamburger = $('<button id="hamburger">&#9776;</button>');

$("header").append($hamburger);


// Toggle nav with icon

if ($("#hamburger").css("display") === "block") {

$("#nav_container").hide();

$hamburger.click(function(){

$("#nav_container").slideToggle("slow");
});

} else {
$("#nav_container").show();
}

Appreciate any help in advance!

jqueryhtmlcss

Answer №1

My approach would be to have the hamburger menu displayed by default for mobile devices, with the nav_container initially hidden. The button is already included in the markup, eliminating the need for dynamic appending. Through a media query detecting a screen size of 481px or larger, the hamburger menu can be hidden and the nav_container revealed. The jQuery code can then handle the sliding animation. To prevent conflicts, I used '!important' in the media query for the nav_container display property. Alternatively, using CSS classes to toggle visibility is another viable option.

Check out the code on JSFiddle

CSS:

#hamburger {
    display: block;
    position: fixed;
    z-index: 10000;
    font-size: 1.5em;
    outline: 0;
    border: 0;
    width: 100%;
    padding-left: 90%;
    background-color: #FFFFF2;
}
#nav_container {
    display: none;
    top: 0;
    right: 0;
    padding-top: 30px;
    background-color: #FFFFF2;
}
#navbar li {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 5px auto;
}
#navbar {
    font-size: 1.5em;
    width: 100vw;
}
@media only screen and (min-width: 481px) {
    #hamburger {
        display: none;
    }
    #nav_container {
        display: block!important;
    }
}

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

Managing JSON Forms using jQuery on Google's App Engine

Having difficulty getting jQuery to function properly on GAE in python 2.7. The main issue is that jQuery is unable to retrieve the json data sent by the server. A basic comment form with no special features: <form action="/postcomment/" method="post" ...

javascriptjquerypythonjsongoogle-app-engine

Dropdown menu is not positioning correctly over other elements on the webpage

After researching multiple stack overflow questions and attempting various solutions, I still haven't been able to resolve my issue. Please refrain from marking this question as a duplicate. The problem I am facing is that my dropdown menu is not ap ...

htmlcsssass

The hexadecimal code for the textured background color of an iOS Scroll View in CSS

Can someone share the specific CSS color code with me? I would like to apply this same color to my website. Appreciate it! ...

ioscssbackground-color

Preserve scripts when loading content into a pjax container

I am currently working on my WordPress site and incorporating pjax for the first time. My goal is to update both the #main container and a separate div that houses a stretched background slider. The challenge I encountered was with the script tag associate ...

jqueryajaxwordpresspjax

JSDOM failing to retrieve complete list of elements from webpage

I'm currently struggling with a simple webscraper using JSDOM. Here's the code snippet I've been working on: const axios = require("axios"); const jsdom = require("jsdom"); const { JSDOM } = jsdom; let v = "15" ...

javascripthtmlnode.jsjsdom

Tips on how to redirect the submit button code to the same page without reloading if feasible

I have developed a script that runs in a popup on a WordPress website. The main purpose of this script is to check the entered data against a MySQL database table and display related code if the information is found. If not, it should execute another set o ...

phpjquerymysqlajaxwordpress

Having trouble with submitting the jQuery form

I have written a script to submit a form after validation and receive the values in a PHP file using $_POST. However, I am not able to retrieve the values in the PHP file. When I try to echo the values, it shows up as blank. Can someone please guide me a ...

phpjqueryhtml

Remove image files from a directory with jQuery without relying on PHP or AJAX

Did you know that JQuery code is capable of executing unlink operations like PHP without using AJAX or a PHP file? For instance, if you wish to delete or unlink the file "aaa.jpg" located in the folder www.myproject.com/images/, you can achieve this by s ...

javascriptphpjqueryajaxlaravel

Manipulate the value of an HTML element's style parameter with jQuery

How do I change an element's style property using jQuery? This is the HTML code I am working with: <div id="template" style="width:200px; height:200px; border:none;">blabla...</div> I attempted to do this: $('#template').attr ...

javascriptjqueryhtmlcss

Tips for concealing the URL in the address bar while using `<a href>` links

I have a variety of documents saved in a folder within an ASP MVC 5 project. Instead of directly linking to the document with an HTML tag, I am utilizing the following ng-href: <a ng-href="~/download/document/{{vm.document}}"></a> By using th ...

javascriptjqueryasp.netangularjsasp.net-mvc

Creating a customizable theme for a website built with Bootstrap, incorporating changes to brand colors and more, by utilizing a .less file

I have built my asp site using bootstrap as the client-side CSS framework. I am currently working on implementing a feature that allows users to customize their site's brand color and other aspects, with these changes being saved permanently. While I ...

htmlasp.netcsstwitter-bootstrapless

Display or conceal a div element depending on the user's choice

I am looking to hide inactive divs, but whenever I reload the page, all tab contents merge into one. The screenshot below shows the issue I'm facing. Screenshot Below is the code snippet: $('.tab a').on('click', function ...

javascriptjqueryhtmlselectionshow-hide

Guide on making a color legend with JavaScript hover effects

On my website, there is a dynamic element that displays a table when values are present and hides it when there are no values. The values in the table are color-coded to represent different definitions. I wanted to add hover text with a color key for these ...

javascriptjqueryhtmlcsshover

Error encountered during post-installation process for package `[email protected]`. The script `node scripts/build.js` failed to execute, resulting in an exit status of 1

https://i.sstatic.net/LC5wq.pngWhenever I run the gulp serve command for my AngularJS Fuse project, I encounter this error. C:\wamp\www\bank_admin_post_login\Fuse-1.4.1-demo>gulp serve C:\wamp\www\bank_admin_post_log ...

htmlangularjsnode.js

Chrome not loading all the videos on a single page

Currently, I am working on a project that involves loading multiple videos on a single web page. The code snippet I am using looks like this: <div class="video_content left"> <span style="font-weight:bold">1</span> <video wi ...

htmlgoogle-chromehtml5-video

Tips for enhancing the clarity of elements in KineticJS

I'm new to using Kinetic JS, and while I think it's a great library, I'm having trouble with the resolution of the elements. I know that Kinetic JS doesn't use SVG, but the resolution is not up to par. I'm creating circles and othe ...

javascripthtmlcsscanvaskineticjs

Enhance your website with dynamic effects by incorporating CSS3 columns and responsive layouts. Utilize CSS3 or jQuery/JavaScript to

I have decided to create a masonry style layout using CSS3 for the columns, which has made building the layout easier and more precise. This is especially useful as I am working on a responsive design. Currently, I am implementing CSS3 media queries to ad ...

jquerycssanimationtransitionmultiple-columns

A successful AJAX request in Spring MVC is authenticated

I am facing some issues while trying to send a jQuery AJAX request to my Spring MVC Servlet. I have read several articles, but none of them have been able to help me with my problem :( Here is the AJAX request code snippet in question: $.ajax( ...

javajqueryajaxspring-mvc

Rapidly verifying PHP arrays with jQuery/AJAX

I am looking for a way to validate values within a PHP array in real-time without the need to click a submit button by utilizing jQuery/AJAX. As users type an abbreviation into a text field, I want to instantly display whether the brand exists (either v ...

javascriptphpjqueryajax

What is the best way to combine two arrays of objects in AngularJS?

How can I merge the existing object array with another one in AngularJS to implement the "load more" feature? Specifically, I want to add the AJAX response to the existing data each time. Currently, I have a variable called $scope.actions that holds the ...

javascriptjqueryangularjsmergeappend