Topic: Navbar toggle button not visible in Firefox in mobile view; Solution

tom2 pro asked 7 years ago


Hello, I found out just now that the navbar-toggler-icon was not visible in Firefox in Mobile viewport. I found the solution reading http://stackoverflow.com/questions/30733607/svg-data-image-not-working-on-firefox So line 6177 in mdb.css .navbar.navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); } should be corrected to .navbar.navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); } So replacing #fff by %23fff This does the trick. Can this be corrected please in the new version, so I have a minified version of the correction? Or do you have a good minify tool or URL I can use to generate it myself? Best regards

Thank you for your suggestion. This will be fixed in MDB 4.3.1

Benny Bottema pro commented 6 years ago

This is again invisible in Chrome 63.0.3239.132 (Official Build) (64-bit), MDB 5.0.0 (Angular Admin template).

Damian Gemza staff commented 6 years ago

Hello Benny, When did you tested this? I've checked it on latest Firefox, Chromium 63.0.3239.84 on Ubuntu and on Chrome 63.0.3239.132 (Official Build) (64-bit) on Windows, and it's work correctly. Could you provide me some screenshots? Best Regards, Damian


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags