Topic: mdb-breadcrumb height
How do i modify the height of a mdb-breadcrumb? I have it underneath my nav-bar and it looks too thick. My efforts to set style seems to have failed. Also I couldn't make it sticky. It will be great if you can help me with these two issues with bread-crumbs.
Resources (screenshots, code snippets etc.)
<div class="bc-icons-2 breadcrumb-font position-sticky" mdbSticky>
<mdb-breadcrumb customClass="indigo lighten-4" style="height: 10px;">
<mdb-breadcrumb-item class="nav-link" [routerLink]="['/home']">
<a class="text-primary">Home</a>
</mdb-breadcrumb-item>
<mdb-breadcrumb-item class="active nav-link">
<mdb-icon fas icon="angle-double-right" class="mr-1"></mdb-icon>
TestPath
</mdb-breadcrumb-item>
</mdb-breadcrumb>
The mdbSticky directive should work correctly here, did you add closing div tag in your application code? Because it's not available in the code that you added here.
To reduce the height you can try to modify the breadcrumbs top and bottom paddings by adding this rule to the global styles.scss file:
.breadcrumb {
padding-top: 0;
padding-bottom: 0;
}
lalithkx free commented 4 years ago
Updated for the code above for ending . BTW, Padding worked great, but not the mdbSticky tag. Thx. Please let me know if you have any pointers. Thx again
Arkadiusz Idzikowski staff commented 4 years ago
Are there any errors in console when you use mdbSticky directive? Did you import StickyContentModule or MDBBootstrapModulesPro.forRoot()?
lalithkx free commented 4 years ago
Yes, I did import MDBBootstrapModulesPro.forRoot() in app.modules.ts. No luck in making it sticky
Arkadiusz Idzikowski staff commented 4 years ago
Can you add some more code to your first post or sent a simple demo app to a.idzikowski@mdbootstrap.com? We tried to reproduce the problem with sticky on our end but without success.
lalithkx free commented 4 years ago
I sent an email last night. Forgot to mention it here.
Arkadiusz Idzikowski staff commented 4 years ago
Thank you, we will take a closer look at this code and let you know what we found.
lalithkx free commented 4 years ago
This problem is still unsolved. I am using mdbSticky directive. I am emailing MDB 9.4 test project code to demonstrate this. Please note that I had to change the the .zip extension to .pdf to fool the email system from rejecting the attachment. Hopefully you can find find a solution.
Arkadiusz Idzikowski staff commented 4 years ago
The email we received does not have an attachment. Could you try to send the zip file using Google Drive? This way you can send a zip without a problem.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.5.4
- Device: Desktop
- Browser: Any
- OS: Windows
- Provided sample code: No
- Provided link: No