mdb-breadcrumb height

Topic: mdb-breadcrumb height

lalithkx asked 2 years ago

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 class="active nav-link">
        <mdb-icon fas icon="angle-double-right" class="mr-1"></mdb-icon>

Arkadiusz Idzikowski staff answered 2 years ago

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 commented 2 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 2 years ago

Are there any errors in console when you use mdbSticky directive? Did you import StickyContentModule or MDBBootstrapModulesPro.forRoot()?

lalithkx commented 2 years ago

Yes, I did import MDBBootstrapModulesPro.forRoot() in app.modules.ts. No luck in making it sticky

Arkadiusz Idzikowski staff commented 2 years ago

Can you add some more code to your first post or sent a simple demo app to We tried to reproduce the problem with sticky on our end but without success.

lalithkx commented 2 years ago

I sent an email last night. Forgot to mention it here.

Arkadiusz Idzikowski staff commented 2 years ago

Thank you, we will take a closer look at this code and let you know what we found.

lalithkx commented 2 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 2 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.

Please insert min. 20 characters.


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



Specification of the issue
  • User: 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