The full screen menu is exclusively displayed in the navigation bar

My HTML and CSS code is causing an issue where the full-screen menu only appears in the nav bar. This problem seems to be specific to Safari.

To solve the issue, I need to remove the following code:

.nav {
      position: fixed;
    }
  

However, I still want the nav bar to remain fixed at the top of the page.

.nav {
          font-family: Arial-BoldMT;
          font-size: 16px;
          list-style: none;
          text-align: right;
          padding: 0px 0 0px 0;
          box-shadow:0px 1px 1px #d3d3d3;
          background-color: white;
          width: 100%;
          z-index:0.1;
          overflow: auto;
          position: fixed;
          top: 0;
        }

        .nav p {
          float: left;
          margin-left: 40px;
          color: #333333;
        }

        ...

        </div>

Answer №1

z-index:0.1; 

This CSS code is incorrect and not valid.

The z-index property must be an integer, either negative or positive. Most browsers will likely treat a decimal value like 0.1 as 0, but Safari may have issues with it. It's recommended to change the value to an integer such as

 z-index:1;

You can set your overlay to z-index:2 (and you could leave enough space between the numbers in case you need to add more elements later on, for example z-index:100; and z-index:200;)

If you set the element as fixed position with top at 0, it should stick to the top of the page once you correct the z-index problem.

Answer №2

Encountered an issue with

.menu {
display: flex;
}

This caused the menu to break outside of its container.

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

Newly designed Bootstrap 4 input field with search feature positioned off-center on smaller screens

I have successfully positioned an input text next to a button as shown below: While it displays perfectly on a regular computer screen, the alignment gets skewed when viewed on a phone device: This is the functional code I am using: <!-- Add Filer Fo ...

What is the best way to determine the maximum `width` in a `translateX` animation?

I'm looking to design something similar to a desktop-only carousel. Here's the code snippet I have: <div class="wrapper"> <div class="image-container"> <img alt="Siac" src="https://diey.now.sh/Icons/Clients/SIAC_LOGO.svg"> ...

The text is not meticulously arranged within the designated span

My text-align (center) property doesn't seem to be working correctly with the following code snippet: <span class="info">&nbsp;i&nbsp;<span id="uitleg_itje">Bla bla. </span></span> The CSS for the info class is as fo ...

Node.js and Express: Delivering Seamless Video Streaming via HTTP 206 Partial Content

Having a binary file like an mp4 video in a MarkLogic database, I am utilizing the Node.js API of the database to stream this document in segments. The structure is as follows: html document <video controls="controls" width="600"> <source src= ...

Print the page number using HTML and PHP

Is there a way to center page numbers in HTML? I have the code below that echoes the numbers, but they always appear on the left side of the page. I tried wrapping them in a div to center them, which worked, but then each number is enclosed in its own d ...

Create beautiful PDF documents using the KNP Snappy Bundle, seamlessly converting dynamically modified Twig templates

Currently, I am attempting to create a PDF from a tweaked Twig on the client side. My approach involves sending the modified HTML document to the server via AJAX. However, this method is proving ineffective as the server is returning a binary document that ...

Mozilla Extension: Run code on initial launch

Currently in the process of building an add-on and looking to implement specific code for its initial run. What I aim to achieve is clicking on the add-on button, navigating through files, and selecting an executable file. This browsing action should only ...

Utilizing the native cursor feature in Adobe AIR JavaScript using MouseCursorData

I have been exploring the content of this article: which details how to create a native cursor in AIR without resorting to using a sprite to mimic the functionality. However, my project is based on HTML/JavaScript rather than ActionScript. Here is the c ...

Having trouble aligning input elements in the middle of a div container

Can anyone help me with centering elements inside a div? Check out this example: I created a wrapper for the number inputs and tried applying the text-center property on them, but it's not working. I also changed the display to block, but that doesn& ...

Using Local Storage to store arrays in JavaScript/jQuery

Currently, I am implementing a set of multiple buttons each containing data-id and data-name Below is my concept along with some sample code for reference: $(".clickCompare").click(function ({ var id = $(this).attr('data-id'); var ...

Is there a way to use lodash to convert an array into an object?

Below is an array that I am working with: const arr = [ 'type=A', 'day=45' ]; const trans = { 'type': 'A', 'day': 45 } I would appreciate it if you could suggest the simplest and most efficient method to ...

Can you create a stroke that is consistently the same width as the container BoxElement?

Utilizing a BoxElement provided by the blessed library, I am showcasing chat history. New sentences are inserted using pushLine. To enhance readability, days are separated by lines (which are added using pushLine). The width of each line matches that of t ...

Using JavaScript in Selenium, you can check a checkbox and verify whether it is checked

How can I select a checkbox and determine if it is checked using JavaScript, Selenium, and Node.js? I have attempted to use the .click method on the element and also tried native JavaScript code, but unfortunately it has not worked for me. driver.findElem ...

A JavaScript function that instantiates an object that invokes its own function

Currently, I am working on an Angular service that is meant to return a new object. Everything seems to be fine and in working order. When I use new MakeRoll(), it successfully creates an instance. However, the issue arises when I call self.add towards th ...

Enhance your view of the iFrame's CONTENT by zooming in

I'm attempting to magnify (without altering the dimensions) an iFrame containing a SWF file. <iframe src="http://ray.eltania.net/TEST/swf-play/swf/testMotion.swf" width="600px" height="500px" frameBorder="0"></iframe> http://jsfiddle.net ...

Struggling to get collapsible feature functioning on website

I'm trying to create a collapsible DIV, and I found a solution on Stack Overflow. However, I'm having trouble getting it to work on my website. I created a fiddle with the full code, and it works there. But when I implement it on my site, the con ...

css Repaint the CSS by filtering out list items with odd indexes

Having a list of over 20 items, I utilized the :nth-child(2n+1) selector to alternate the background color (even item in black, odd item in white). However, when using the jQuery Isotope plugin to filter out specific items by adding a .isotope-hidden class ...

Angular 14: Enhance Your User Experience with Dynamic Angular Material Table Row Management

My inquiry: I have encountered an issue with the Angular material table. After installing and setting up my first table, I created a function to delete the last row. However, the table is not refreshing as expected. It only updates when I make a site chang ...

Tips for resolving asynchronous s3 resolver uploads using Node.js and GraphQL

My goal is to upload an image and then save the link to a user in the database. Below is my GraphQL resolver implementation: resolve: async (_root, args, { user, prisma }) => { .... const params = { Bucket: s3BucketName, ...

Data is not displaying correctly in the Angular Material Table

I'm currently trying to build a mat table based on an online tutorial, but I'm facing a problem where the table appears empty even though I have hard coded data. As someone new to Angular and HTML/CSS, I'm struggling to understand why the ma ...