Custom Color Hamburger Icon - MDB Pro 6.2.6 - Material Design for Bootstrap

Topic: Custom Color Hamburger Icon - MDB Pro 6.2.6

gkondrach pro asked 6 years ago

I'd llike to apply custom color - #ff3333 or rgba(255,51,51,1.0) - to [iconBackground]. Current is [iconBackground]="['deep-orange', 'accent-3']" What is the correct notation for BOTH ... 1) apply directly in html, AND 2) specify in CSS then apply in html? Thanks. George

Add comment

Damian Gemza staff answered 6 years ago

2 0 Best answer

Dear George, It's super easy to achieve it. Just create your own class in which it will be defined the new background color for hamburger icon, and use it in iconBackground input. Please check the below code. .html:

<mdb-navbar SideClass="navbar navbar-dark indigo" [containerInside]="false" [iconBackground]="['custom-hamburger-class']">

.scss:

.custom-hamburger-class {

background-color: rgba(255,51,51,1.0);

}

Best Regards, Damian

Add comment

Damian Gemza staff answered 6 years ago

1 0 Best answer

Dear gkondrach, Please add .hamburder-icon-amp in styles.scss, not in component stylesheet. Without adding this class to styles.scss, the hamburger won't change the background color. Best Regards, Damian

Add comment

gkondrach pro answered 6 years ago

0 0 Best answer

Damien, I thought 'super-easy' as well, and had coded it as you suggest, with different semantic but identical syntax. Then tried with your semantic. Neither work. Any stock color in used html works. .scss:

.hamburger-icon-amp { background-color: rgba(255,51,51,1.0); }

.html:

<mdb-navbar SideClass="navbar navbar-dark rgba-black-light fixed-top scrolling-navbar" [containerInside]="false" [iconBackground]="['hamburger-icon-amp']">

Add comment

gkondrach pro answered 6 years ago

0 0 Best answer

That did it, Damian. Thank you for hanging in with me on my rookies mistake! Cheers, George

Add comment

Phillip Jacobs answered 5 years ago