Tips for implementing an overlay navigation menu specifically for mobile devices, with a standard navigation bar for larger screens

I'm currently working on creating a unique full screen overlay navigation menu, but I've encountered some challenges along the way. My goal is to have the overlay appear underneath my transformed hamburger menu and hide all other elements on the webpage. I've reached a point where this working prototype can be viewed (best in mobile view). I would greatly appreciate any assistance in achieving this desired outcome. Below is the jQuery code snippet I am using to toggle the state of the hamburger menu:

Jquery

$("#mobile-menu").click(function () {
  $(".icon").toggleClass("close");
  var x = document.getElementsByClassName("overlay")[0];
  if ($(".icon").hasClass("close")) {
    x.style.display = "block";
    $("body").addClass("modal-open");
  } else {
    x.style.display = "none";
    $("body").removeClass("modal-open");
  }
});

CSS

  .overlay {
    height: 100vh;
    width: 100%;
    margin: 0px;
    display: none;
    overflow: hidden;
  }

Desired result : The overlay covers the body but remains under the hamburger menu

I have searched for solutions related to this issue, but most examples involve an overlay menu with its own closing button. In my case, I need the closing button to remain fixed and on top of the overlay.

javascripthtmljquerycssweb

Answer №1

Here are the main points:

$('.toggle').on('click',function(){
  $('body').toggleClass('active');
})
body{ background:#eee; padding:0; margin:0; overflow:auto;}

body.active{
  overflow:hidden;
}
.header{ 
  position:fixed;
  z-index:10;
  left:0;
  top:0;
  padding:10px;
  width:100%;
  height:30px;
  background:#000; 
  color:#fff;
  }

.overlay{
  position:fixed;
  display:none;
  z-index:5;
  left:0;
  top:0;
  background-color:#333;
  color:#fff;
  width:100%;
  height:100%;
}

body.active .overlay{
  display:block;
  }

.menu{
   display:flex;
   align-items:center;
   width:100%;
   height:100%;
   justify-content:center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
<body>
<div class="header"><button class="toggle">menu</button></div>
<div class="overlay">
  <div class="menu">menu</div>
</div>
lorem ipsum<br/>
(lorem ipsum repeating multiple times)
</body>

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

Use AJAX to send the values selected in two dropdown menus to a PHP script without the need to click

I am currently working on a project that involves two dropdown lists. I need to capture the user's selection from these dropdowns in order to fetch data from a database using PHP. The challenge is that there is no submit button, and I am unsure of how ...

javascriptphpjqueryajax

Spin a Material UI LinearProgress

I'm attempting to create a graph chart using Material UI with the LinearProgress component and adding some custom styling. My goal is to rotate it by 90deg. const BorderLinearProgressBottom = withStyles((theme) => ({ root: { height: 50, b ...

javascriptcssreactjsmaterial-uirotation

Tips for customizing the appearance of a checkbox made with AngularJS

I need to style the checkbox using CSS without modifying the HTML code provided due to company restrictions. Is there a way to customize the appearance of the checkbox purely through CSS? Below is the AngularJS code snippet: <label class="form-lbl n ...

htmlangularjscsscheckboxtwitter-bootstrap-3

The image displayed by the @vercel/og API route is not appearing correctly

I am currently facing an issue with my Next.js app hosted on Vercel Edge while trying to set up the Vercel/og package. You can find more information about it here: https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation Upon loading ...

javascriptnext.jsfacebook-opengraphvercel

Obtain HTML tags from RSS CDATA section

Is there a way to extract HTML tags from a CDATA tag in an RSS feed? I have utilized a basic jQuery function to retrieve the JSON object from the RSS, below is my code: $.get("someURL", function(data) { console.log('InGet'); ...

jqueryhtmljsonxml-parsingrss

Enriching an array with values using Mongoose

Is there a way to assign a User as an admin for the School? School Schema: const School = new Schema({ name: { type: String, required: true }, grades_primary: [{ type: Schema.Types.ObjectId, ref: 'Grade' }], grades_secondary: [{ type ...

javascriptnode.jsmongodbexpressmongoose

Controlling the page scroll when adding data using jQuery

I am encountering an issue with a webpage that displays around 20 pictures in separate divs stacked vertically. Below these 20 pictures, there is a "show more" button that, when clicked, loads another set of 20 pictures and appends them to the existing dat ...

htmljqueryscroll

Confusion surrounding the concept of returning an arrow function from a Vuex storage getter

I delved into a Vuex course and the journey was smooth sailing until they introduced an arrow function in a getter, then utilized it in a computed property and action. Behold the code: item structure: const _products = [ { id: 1, title: "iPad 4 Mini", ...

javascriptvue.jsvuexgetterarrow-functions

Creating a dynamic layout with Bootstrap 4 featuring a full-page design, two columns, and a

For a simple "login" page, I came across this template: HTML: <div class="d-flex align-items-center flex-column justify-content-center h-100 bg-dark text-white" id="header"> <h1 class="display-4">Hello.</h1 ...

htmlcsstwitter-bootstrapbootstrap-4

"Learn how to convert basic input fields into user-friendly Bootstrap input groups using the power of jQuery

Is there a way to use jQuery to convert my basic input field into a bootstrap input-group like the one shown below? This is how I created the input: <div class='input-group date' id='ff'> <input type='text' class= ...

javascriptjqueryhtmltwitter-bootstrap

Utilize a MongoDB query to locate a single document and include a conditional statement within the update operation

I've been struggling with this problem for quite some time now and I could really use some guidance from experts here on SO. Essentially, what I am trying to achieve is to locate a specific document using a provided _id, and then execute a conditional ...

javascriptnode.jsmongodbexpressasynchronous

Having trouble with HTML tags not parsing correctly in PHP?

Similar Question: Getting a parse error: syntax error, unexpected T_STRING 59 I'm working on displaying names from a database in a table format with checkboxes. Everything seems to be functioning correctly until I try to include the input tag wit ...

phphtmlmysql

What is the best way to create a random key using a factory function?

I am working on a function that generates objects, and I would like to be able to specify the key for the object as a parameter. However, when I try to do this, the function does not recognize the parameter properly and sets its name as the key instead. h ...

javascriptreactjsreact-native

Significant distance between the content and the footer section of the page

Having trouble with a large gap between the content and footer ad on my website. I've tried to troubleshoot it myself, but suspect the issue may be related to the content generated by another site (indeed.com). Check out the link here: Any assistanc ...

csshtml

*ngIf doesn't seem to be functioning as expected compared to other *ngIf directives

Encountering a peculiar issue with my *ngIf related to the isAdmin variable which determines whether the list of users in userList should be displayed or not. Strangely, it seems to behave differently compared to other *ngIf statements within the same comp ...

javascripthtmlangularmeteor

How can we determine in JavaScript whether a certain parameter constitutes a square number?

I've developed a function that can determine whether a given parameter is a square number or not. For more information on square numbers, check out this link: https://en.wikipedia.org/?title=Square_number If the input is a square number, it will ret ...

javascriptnumbersperfect-square

Issue with a Django view not providing a return statement following an Ajax GET request

I am encountering an issue where the view function instruction is not executing after the Ajax GET request from the HTML page. Below is the content of model.py: from django.db import models from django.utils import timezone class user(models.Model): ...

jquerypythonajaxdjango

What is the best way to display data from multiple lists that are returned by a JSON function?

List of My Models: ClassAllocate: Contains Id, DepartmentId, CourseId, RoomId, DayId, StartTime, EndTime Course: Consists of Id, CourseCode, CourseName, DepartmentId Room: Includes Id, RoomNumber Day: Has Id and DayName My goal is to search for course ...

javascriptasp.netjsonlinq

Trouble Viewing Images on Website

I am currently dealing with a critical issue in my project. I am using the MVC model and have my CSS stylesheet located in the view folder. In this stylesheet, I have included the following code for the body element: body{ margin-left:250px; backg ...

phphtmlcss

Tips for creating a header.php and footer.php integrated with CSS files

I am in the process of constructing my website using HTML files. I want to make sure that my header and footer sections are dynamic so I can easily modify them without having to update numerous files each time. While I've attempted a few methods based ...

phphtmlcssheaderfooter