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

Please insert min. 20 characters.

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

Phillip Jacobs free answered 4 years ago

0 0 Best answer

@Damian Gemza Best Answer Ever. Thank you!

How would i use the same approach but to change the color of the actual icon ?

Konrad Stępień staff commented 4 years ago

Hi @Phillip Jacobs,

Do you want to use something like this? https://mdbootstrap.com/docs/angular/content/icons-usage/#colors

You can set class for the icon.

Is the above example suggested by @Damian Gemza not working as it should?

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

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

Please insert min. 20 characters.

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

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 6.2.3
Device: all
Browser: all
OS: all
Provided sample code: No
Provided link: No

gkondrach

Pro User 170Support score
8Questions 13Answers 0Snippets