Issue with SideNav function in MaterializeCss following recent update

After updating the css/js files of the Materializecss design in my project from v0.97.5 to v0.97.8, I noticed that my SideNav isn't functioning correctly anymore. When I try to click on the menu, it slides out but the dark overlay covers the entire screen, rendering everything unclickable. Here's a visual representation:

Image Link

It seems like the 'sidenav-overlay' div with opacity is appearing above the sideNav, and I'm unable to interact with any of the menu items within the sideNav.

The setup is quite similar to what's outlined in the documentation, so I'm not sure what exactly has changed causing this issue.

EDIT1: My code - 

<div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper light-blue lighten-1">
      <ul id="slide-out" class="side-nav hide-on-med-and-down print-hidden">
        <li><a href="#!">Upload<i class="material-icons right">cloud_upload</i></a></li>
        <li class="divider"></li>
        <li class="div-title">Admin</li>

        <li><a href="/admin/users">Users</a></li>
        <li><a href="/admin/roles">Roles</a></li>
      </ul>

      <a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="material-icons">view_headline</i></a>

      <a href="#" class="brand-logo">LOGO</a>
    </div>
  </nav>
</div>
javascripthtmlcssmaterialize

Answer №1

My problem was resolved by relocating my side-nav ul list outside of the navbar-fixed div. While this setup worked fine in previous versions, it suddenly broke in version 0.97.8 for some reason.

I simply moved the side-nav out of the navbar section and this fixed the issue for me. Hopefully, this solution can assist others facing the same dilemma.

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

Exploring the world of Typescript and Angular Filter functionalities

I am looking to utilize one of my Angular Filters in my controller as a function. I came across a solution on this page: How to use a filter in a controler The last answer provided exactly what I needed, so I implemented it in my JS code: var MyFunc ...

javascriptangularjstypescript

having trouble transferring data from one angular component to another

I've been attempting to send data from one component to another using the service file method. I've created two components - a login component and a home component. The goal is to pass data from the login component to the home component. In the l ...

javascriptangularangular-componentsangular-module

Headers cannot be set again after they have been sent to the client in Express Node

I attempted to create a post request for login with the following code: router.post('/login', async(req, res) =>{ const user = await User.findOne({gmail: req.body.gmail}) !user && res.status(404).json("user not matched") c ...

javascriptnode.jsexpress

Tracking by $index yields an overwhelming amount of results

Encountered an error with Angular that mentioned duplicates in a repeater: To address this, I added the following line of code: rooster in rooster.uren track by $index However, this caused an unexpected issue where multiple panels were created even thoug ...

javascriptangularjs

Switching over the database for a session away from using ajax

I am currently working with an XML API that interacts with a database. My website utilizes the functions of this XML API to retrieve data from the database. I am facing a challenge where I need to update the database based on the user's selection on t ...

phpjavascriptxmlajax

Using jquery to dynamically change audio source on click

Is there a way to dynamically change the audio src using jquery? <audio id="audio" controls="" > <source src="" type="audio/mpeg" /> </audio> <ul id="playlist"> <?php if($lists) { foreach ($lists as $list) { ?> ...

javascriptjquery

Revalidation of paths in NextJS 13 is functioning properly for newly created comments, however, it is not working as

I'm encountering an issue with the implementation of revalidatePath() in my CommentForm and PostForm components. Despite both components having a similar structure and functionality, only the CommentForm component is able to utilize revalidatePath() c ...

javascriptreactjsnext.js

Is there a way for me to direct to a different HTML page once I click on a certain data point?

At the moment, I have been utilizing this complete set of calendar codes. <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <link href='fullcalendar.css' rel='stylesheet' /> <link href=&a ...

javascriptjqueryhtmlfullcalendar

What is the best way to apply a CSS class to a div element without affecting its child elements using JavaScript?

Currently, I am using JavaScript to add and remove a CSS class through a click event. Within my div structure, I have multiple similar divs. While I can successfully add and remove the class from my main div, I am facing an issue where the class is also ap ...

javascripthtmlcss

Retrieve information from a .json file using the fetch API

I have created an external JSON and I am trying to retrieve data from it. The GET request on the JSON is functioning correctly, as I have tested it using Postman. Here is my code: import "./Feedback.css"; import { useState, useEffect } from " ...

javascriptreactjsjsonreact-hooks

Overflow scrollbars do not appear on flex divs

I am struggling with implementing a simple flex container that contains standard divs. The issue I am facing is that the overflow does not display a vertical scroller as desired. In order to achieve this, I have included the following CSS code snippet: #c ...

htmlcssflexbox

How can the dependencies object be extracted from the package.json file in an Angular project?

Scenario: I am managing multiple Angular applications within the same project. Whenever I need to upgrade an npm package, I find myself having to manually update the package.json files in each application. While I attempted a mono repo approach, it did not ...

javascriptnode.jsangularnpmpackage.json

Is there a way to retrieve the data instead of receiving an undefined result when making an asynchronous call?

subject in user.subjects = subjects below is undefined instead of being an array of subjects. Context: I am working with three database tables - users, subjects, and a relationship table between users and subjects known as users_subjects. The objective i ...

javascriptnode.jsasynchronous

The browser has disregarded a CSS rule

Hey there, I have a question that may seem silly, but I just can't seem to find the answer anywhere. Please take a look at this fiddle: I need to remove #Navigation in the CSS declaration below: #Navigation .stretch { ... } so it should look like ...

cssbrowser

Is there a substitute for useState in a Next.js server component?

With my static site at , the only interactive feature being the dark mode toggle, I understand that using useState is not feasible in a server component. export default function RootLayout({ children }: { children: React.ReactNode }) { const [darkMode, ...

javascripttypescriptnext.jstailwind-cssserver-side-rendering

Is Formik Compatible with TextareaAutosize?

I've implemented react-textarea-autosize and formik in my project, but I'm having trouble connecting the change events of formik to TextareaAutosize. Can anyone guide me on how to do this properly? <Formik initialValues={{ ...

javascriptreactjsformik

Incorporating '@vite-pwa/nuxt' into a nuxt 3 project leads to hydration issues

I have a Nuxt 3 website that I want to make PWA enabled. To achieve this, I am utilizing '@vite-pwa/nuxt'. However, after adding the package and enabling PWA in my nuxt.config.ts file, I encountered two issues: Hydration errors occur when refre ...

javascriptvue.jsnuxt.jsviteprogressive-web-apps

Turn off automatic vertical scrolling when refreshing thumbnails with scrollIntoView()

My Image Gallery Slider has a feature that uses ScrollIntoView() for its thumbnails, but whenever I scroll up or down the page and a new thumbnail is selected, it brings the entire page back to the location of that thumbnail. Is there a way to turn off t ...

javascripthtmljquerycsssass

Using a CSS hack to create a border cutout

The Dilemma... I am attempting to position div elements over a border, while maintaining space on both sides of each div. Take a look at the scenario: Note the gaps surrounding the black divs. I am struggling to find a solution for this issue, aside fro ...

htmlcss

Unlocking the power of module augmentation in Typescript: Enhancing library models within your app domain

I currently work with two applications that share the same code base for their models. I am interested in developing and sharing a library model using inheritance in TypeScript. For instance, Pet extends Author. In my current Angular application, I need ...

javascriptangularjsoopangulartypescript