Creating a stationary menu on the header that overlaps both the header and content on mobile browsers

I'm currently in the process of developing a website, but I've hit a snag that I can't seem to figure out.

You can view the website at . I'm focusing on mobile-first design, so for the best view, try shrinking the browser screen. When you click the menu button in the top right corner, a menu slides in. While the menu isn't styled yet, the important thing is that it smoothly slides in on top of everything.

However, when I view the website on a mobile device using Chrome, the menu slides in on top of the header but gets hidden beneath the content. Strangely, it works fine on Firefox on my mobile.

After some research, I realized that the issue may be related to fixed elements having their own z-index stacks. This means I can't use z-index to solve the problem. It's possible that I need to completely restructure my document, but I'm struggling to come up with a solution.

The current setup includes a fixed header and footer. I'm trying to implement a menu that slides in from the top, appearing above both the header and the content when the menu button is clicked.

htmlcsshidez-index

Answer №1

After some experimentation, I managed to achieve the desired functionality using JQuery:

Upon loading the page, I fixed the menu to the right and positioned it above the page.

Using JQuery, I calculated the height of the header when the menu button is clicked, allowing the menu to slide down to that position. It would then slide back up when the button, menu, or page is clicked again.

(function ($) {

Drupal.behaviors.adhocTheme = {
attach: function (context, settings) {


$('#l-navbutton').click(function () {
     var menu = $('.l-region--navigation');
     menu.css('top', $('.l-header').outerHeight() + "px");
     if(!menu.hasClass('show'))
        menu.addClass('show');
     else   
        {menu.removeClass('show'); menu.css('top', "0px");}
});

$('.l-region--navigation, .l-main, .l-footer').click(function () {
     var menu = $('.l-region--navigation');

     if(menu.hasClass('show'))
        {menu.removeClass('show'); menu.css('top', "0px");}
    });
  }
};
}(jQuery));

I also applied CSS to create a smooth slide-down animation.

.l-region--navigation{
  position: fixed;
  top: 0px;
  right: 0px;
  visibility: hidden;
  background-color: #cccccc; // Old browsers
  @include filter-gradient(#cccccc, #cccccc, vertical); // IE6-9
  @include background-image(linear-gradient(top,  #cccccc 0%,#ededed 62%,#cccccc 100%));
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  @include span (6 of 9);
  @include bleed($grid-padding);
 }

 .l-region--navigation.show{
  visibility: visible;
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
 }

To ensure the menu slides beneath the header without overlapping it, I gave the header a z-index of 100. Overall, the solution works perfectly!

If I wanted the menu to slide over the header instead of beneath it, I could adjust the sliding position from -200px to 0px. This was my initial approach, but I am satisfied with the current setup.

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

Manipulate React class names by adding or removing them

Is there a way to toggle a className on click to change the style of a component? https://i.sstatic.net/z9FoA.png I need to rotate an arrow to the right when it's clicked and hide all components next to it using display: none;. I also require t ...

cssreactjsmaterial-uimakestyles

I'm looking to extract information from a webpage using Python by inputting specific criteria

Looking to gather information from a specific website - Link and save it either in a database or another location. The process involves providing input parameters such as entering the vehicle number, submitting it, then verifying if it matches your car. N ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Transformation effect when hovering over an SVG polygon as it transitions between two states

const createTransitionEffect = (navLI, startCoord, endCoord) => { const changeRate = 0.1; let currentY = startCoord; const animateChange = () => { if (currentY !== endCoord) { currentY += (endCoord - startCoord) * cha ...

javascripthtmlcsssvgtransition

Identify all anchor elements that contain image elements

I am on the hunt. I am looking for a CSS-Selector, but if that's not an option, a jQuery selector would work too. ...

jquerycssimagecss-selectors

The columns in the table are all displaying varying widths even though they have been defined with fixed table layout

I have a nested table displayed in my HTML, and I am attempting to set each column to be 50% width, but for some reason it's not working. In the past, whenever I've needed to accomplish this, applying table-layout: fixed has usually done the tri ...

cssangular

Is it permissible to use DEFER or ASYNC when including a stylesheet?

I am curious if script files are able to utilize the DEFER and ASYNC keywords on a resource include. Are these keywords also compatible with stylesheet (CSS) includes? The syntax I imagine would be: <link rel="stylesheet" type="text/css" href="./path/ ...

htmlcssasynchronousdeferred-loading

Adjusting the size and dimensions of a wmv video embedded on a webpage

I am trying to embed a wmv file on my webpage. The issue I'm facing is that I can't adjust the video frame size to fit the object and div dimensions. Here's the code I'm using: <div style="width: 300px; height: 220px;"> ...

htmlembeddingwmv

Problem with see-through images against a see-through backdrop

I'm experiencing a strange issue with a graphic that has rounded corners. On my HTML page, I have the body set to transparent (style="filter:alpha(opacity=100);opacity:100;background-color:transparent;"), and within this body is a div containing a PN ...

cssiframepngtransparencygif

I'd like to eliminate everything following the .com

Hey there! I figured out how to remove the www and https from a URL, but now I want to get rid of anything after ".com", like this: www.something.com/something/something. My goal is to eliminate */something/something~ from the URL. <form method="post ...

phphtmlformsif-statementreplace

Navigating AJAX Pages - Maximize the Potential of #home and Other Sections

I am working on creating AJAX pages using a tutorial I found on Tutorialzine. The script I am using loads pages using AJAX but it requires specifying the page number in the URL like http://example.com/#page1 or http://example.com/#page2. Is there a way t ...

javascriptphpjqueryhtmlajax

Troubleshooting border-left and td alignment problems in an HTML email displayed in Outlook 2013

Currently, I am facing a frustrating challenge while working on an HTML email signature. It seems to display perfectly in all email clients except for Outlook 2007, 2010, and 2013. The specific issue I'm encountering is with the alignment of the secon ...

htmlcssemailoutlook

JavaScript issue causing unexpected behavior in top and left positions

I've been experiencing an issue with my JavaScript code on an HTML file. Despite changing the top or left values, the image does not move as expected. I've spent hours searching for a solution and even tried copying tons of different code snippet ...

javascripthtmlcss

Creating interactive forms (the optimal method)

My project involves creating an Android Tablet application that will connect to a web service to retrieve dynamic forms which can be filled offline and then submitted when online. These forms are not predefined, and may contain attached images. However, I ...

androidxmljsonweb-serviceshtml

The use of script src with vue.js is causing issues

I am looking to move my Vue code into an external .js file. Since I am new to Vue, I am trying to keep it simple without using webpack. However, I have encountered an issue where Vue does not work when using the script src tag in the html file. For instanc ...

javascripthtmlvue.js

React App anchor tag's external links fail to function properly on subsequent clicks when accessed through mobile devices

I have encountered an unusual issue with <a> anchors for external links in my React App on mobile viewports. Initially, clicking an external link opens a new tab just fine on mobile. However, subsequent link clicks on the same or other <a> elem ...

javascripthtmlreactjs

Toggling with Jquery when an image is clicked

I'm trying to wrap my head around the functionality of jquery toggle. My goal is to toggle to the next anchor element with the class plr-anchor when an image with the class go_down is clicked. The information is being populated using maps. Javascript ...

javascriptjqueryhtmlreactjstoggle

The page separator image sinks below the menu

Take a look at the home icon located at the top left corner of this page: If you observe closely, you will notice a small orange line extending below the orange header towards the bottom left of the home button. I have spent hours attempting to adjust it ...

css

How can I align bullets in an unordered list with the left margin of the heading above?

Is there a way to line up the bullets with the left margin of the text above the list? Here's an example: <html> <style> ul.p1 {padding-left: 40px} ul.p2 {padding-left: 0px} </style> <body> <h2&g ...

htmlcss

Node/Angular application facing a breach in content security

After working on a website built with node/express/angular/javascript, I returned to the project months later only to find that I couldn't display any page of the application when running it locally on node js. The error message "cannot get "{webpage} ...

htmlnode.jsangularexpresscontent-security-policy

Tips for creating a dynamic text that adjusts to different screen sizes within a bootstrap button

When utilizing the w3.css and bootstrap libraries to add a link button, an issue arises when resizing the screen as the text inside the button does not respond accordingly. How can we ensure that the text fits within the button based on the screen resoluti ...

htmlcsstwitter-bootstrapbuttonresponsive