Topic: Navbar Issues: When switching to responsive page hamburger icon is broken and remains white
ak.leimrey pro asked 6 years ago
What the title says. Is there a way to change the style of the icon as well?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
Ollie Vincent pro commented 6 years ago
Could you share a link where this is happening?Damian Gemza staff commented 6 years ago
Dear ak.leimrey, please provide us more informations - some screenshots or reproduction steps. Best Regards, Damianak.leimrey pro commented 6 years ago
Sorry for the late response, here a few examples. https://imgur.com/8Zvyeyi https://imgur.com/R8sqcmcDamian Gemza staff commented 6 years ago
Which MDB Angular version are you using? The newest MDB Angular is 5.2.2. Please update it, if you have something below. Best Regards, Damianak.leimrey pro commented 6 years ago
I did update it, but no success. npm install git+https://oauth2:mytoken@git.mdbootstrap.com/mdb/angular/ng-pro.git --save Unless there is a way to upgrade it that is missing in the 5 minute setup description.Damian Gemza staff commented 6 years ago
Please delete your node_modules and type npm install one more time. If this won't work to you, let me know.ak.leimrey pro commented 6 years ago
Doesn't work. Same issue as before. I deleted the node_modules folder and I did npm with the dependency "dependencies": { "ng-pro": "git+https://oauth2:mytoken@git.mdbootstrap.com/mdb/angular/ng-pro.git" }Damian Gemza staff commented 6 years ago
Is there a possibility to send me your project ? If yes, here's my mail: d.gemza@mdbootstrap.com It would help me debugging your case. Best Regards, Damianak.leimrey pro commented 6 years ago
Trying to send you a mail, but it gets rejected.Damian Gemza staff commented 6 years ago
So push it to github and paste me link in mailak.leimrey pro commented 6 years ago
I can't. The project is supposed to be private and that would require me to add you to the git repository. I'll have to try other things.Damian Gemza staff commented 6 years ago
Pack it to .tar.gz archive or .zip, and try to send it to me via gmail. If not, maybe some file hosting? And link to it via mail ? But first delete node_modules folderak.leimrey pro commented 6 years ago
Sorry, but I can't solve it all. I have taken literally every single step I could think of and I tried everything that was suggested to me: I deleted the node modules I deleted the scss folder/typescript folder and replaced them with the folder from the quick-start folder (version 5.2.1) I ran the npm install with the updated dependencies from the quick start folder + with the mdb pro dependency with my own API Key in it The white nav-bar still has no visible hamburger menu icon when the header is white.Ollie Vincent pro commented 6 years ago
By the look of your screenshots - the menu toggle is styled white. Can you try and change this colour? By default the toggle will use a input=checkbox function which will then be hidden thus showing just the toggle. If this is a checkbox, try and hide it. It might be as simple as missing some styling. :)ak.leimrey pro commented 6 years ago
@Ollie thus why I asked if there is an alternate proper solution to style it myself. I would genuinely wish, that the guides would also present some additional cases for when we want to style certain components further via css. While visual design isn’t supposed to be my job, our designer struggles with certain intricacies of the MDB. Currenty I feel, the more I mingle with MDB the more frustrating it becomes. As I did update my project now other issues popped up again for the ones that were currenty solved on my end – like the datepicker having the wrong z-index again when it reaches up to the navbar, while the modal itselfs works perfectly again, forcing me to correct it myself again. It has become vexing, to say the least and it stops me from being productive altogether.Ollie Vincent pro commented 6 years ago
I tend to overwrite things in my stylesheet with the !important tag. Is that not possible in your case? That way when you update your fixes will still be thereak.leimrey pro commented 6 years ago
@Ollie I'm not very knowledgable with CSS for that matter. I was supposed to be mostly coding the logic in my project, but more work has shifted towards me. There are so many components I would like to style just roughly, like that lever component and I have seen only one css example here which doesn't entirely do the trick as I want. Which means, I don't really know how to style the hamburger icon either the way it is right now. But thanks still, Ollie!Damian Gemza staff commented 6 years ago
Problem is solved. There was white navbar with navbar-dark class instead of navbar-light. Author got corrected files on his mail. Best Regards, Damianak.leimrey pro commented 6 years ago
Works. Thanks for the setup of my project!