navbar-expand appears inconsistently

[4levels]

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed
• [x] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Navbar's navbar-expand-* breakpoint should be respected

Current Behavior

The navbar always toggles on the lg breakpoint, so if a different breakpoint is set by using eg. navbar-expand-sm (instead of the default navbar-expand-lg), the navbar still collapses on the lg breakpoint, leaving it unusable between the desired breakpoint and the lg breakpoint. When reaching the desired breakpoint, all looks good again

Failure Information (for bugs)

This seems to be an existing bug and was already fixed in the pro version 2.0.3, just a I found out in this issue: https://github.com/creativetimofficial/ct-material-kit-pro/issues/75 Since the pro version is an empty repo, I cannot apply the fix myself

Steps to Reproduce

1. Copy the sample code from the navbar section
2. Adjust the navbar-expand-lg class to any other breakpoint, eg. -sm, -md, -xs
3. Resize the browser window untill you cross the -lg breakpoint
4. The navbar is now unusable between the lg breakpoint and the chosen breakpoint
5. When resizing futher and reaching the desired breakpoint, all looks good again

Context

• Device: HP Probook G3
• Operating System: ElementaryOS - Ubuntu 16.04 LTS
• Browser and Version: Chromium Version 66.0.3359.181 (Official Build) Built on Ubuntu , running on elementary 0.4.1 (64-bit)

Failure Logs

I can provide screenshots if needed, but this issue is so obvious and so easy to reproduce, please ask if needed

[4levels]

Hi,

after some digging around, I found that the offending media rule seems to be in material-design.css:12345, where regardless of the container's navbar-expand-* class, the navbar is being hidden by the @media all and (max-width: 991px) { statement on line 12329 I tried adjusting this, but this seems a bit out of my leage as there is a lot going on in that section.. When comparing to the regular boostrap media queries, they seem to be using @media min-width: xxx for each expanding class instead of the max-width. Hope this is a quick fix for you guys as this has apparently already been resolved in the Pro version..

Kind regards,

Erik