search

creativetimofficial / ct-material-dashboard-pro-laravel

Material Pro Dashboard For Laravel Framework 11.x and Up
https://www.creative-tim.com/live/material-dashboard-pro-laravel
19 stars 6 forks source link

Responsive collapsing for navbar-expand-xl not working #16

Closed roenfeldt closed 4 years ago

roenfeldt commented 4 years ago

Prerequisites

Expected Behavior

Doing the testing directly on https://www.creative-tim.com/live/material-dashboard-pro-laravel

On screen widths larger than 991px but smaller than 1199px, when changing the responsive breakpoint from "LG" to "XL" on the main <nav> element, in other words:

  1. Before (below can be seen the original markup)

    <!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top text-white"> ... </nav>

  2. After (changed CSS class name from navbar-expand-lg to navbar-expand-xl) - detail no. (1) on the attached screenshot

    <!-- Navbar -->
<nav class="navbar navbar-expand-xl navbar-transparent navbar-absolute fixed-top text-white"> ... </nav>

the "hamburger" responsive menu button should toggle the vertical mobile menu on/off when clicked.

Current Behavior

After simply changing the class name on the <nav> element as specified above, as per the official Bootstrap 4 Documentation, the "hamburger" button doesn't do anything other than toggling the nav-open CSS class on the <html> DOM element - detail no. (2) on the attached screenshot.

Failure Information (for bugs)

Steps to Reproduce

  1. Open https://www.creative-tim.com/live/material-dashboard-pro-laravel in a browser and turn on the browser's Developer Tools
  2. Enable browser's Responsive Design Mode, and set any screen width that's larger than 991px but smaller than 1199px
  3. Locate the <nav> element in the DOM, and change the second CSS class name from navbar-expand-lg to navbar-expand-xl within the Inspector/Elements tab of the browser's Developer Tools. The horizontal "desktop" menu will get hidden, and the "hamburger" button will show up.
  4. Clicking the "hamburger" button will fail to toggle the vertical "mobile" menu on/off. However, clicking the said "hamburger" button will still add/remove the nav-open CSS class on the <html> DOM element.

Context

Failure Logs

Screen-Shot-2020-02-07-at-14 45 18

groovemen commented 4 years ago

Hello @roenfeldt,

Thank you for using our products, we have responded to your request on Zendesk. Also, this issue will be fixed into the next update. Hope that information helps you. Please let us know if we can help you with anything else.

All the best, Stefan

roenfeldt commented 4 years ago

Hello @groovemen,

Thank you for your fast reply as well as for providing me with a temporary quick fix of the issue. I just wanted to let you know that I answered your email on Zendesk and I'll be looking forward to your reply in there.

Best regards, Daniel

groovemen commented 4 years ago

Hello again,

Our friends from @teamupdivision, will send you the modified SCSS files where the navbar-expand-xl class will work properly.

All the best, Stefan

roenfeldt commented 4 years ago

@groovemen thank you for helping me out. I can confirm that the issue is now a thing of the past.

Over and out, Daniel