Topic: Changing Navbar color to custom hex color?

Gadgethakcer free asked 6 years ago

I know there are default colors for the navbars, but what are the properties I have to change/add to add my coustom hex color instead of chooseing the default red, blue etc.?

P Satish Patro free answered 4 years ago

What I have used is

    <mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar intro-fixed-nav" class="navCss"

So, this is not normal class. When I use this, i dev-console I can see

<mdb navbar .....>
    <nav ......>

So, when I am doing

     background-color: pink !important;

It is changing in not in . And in

background-color : red !important //what ever call I gave in Sideclass

So, to access it I used

::ng-deep .navCss nav
      background-color: #CEDD43;

ng-deep has more priority than !important

::ng-deep is often necessary when you didn't write the component and don't have access to its source And why I gave a class .navCss?

It is because ::ng-deep will change everywhere in the component where it finds

So, I enclosed my with class

 <mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar intro-fixed-nav" class="navCss"

So, it willgo though all element, and go inside that element which has class .navCss which is out and change all (in this case auto-generated) inside that

Damian Gemza staff commented 4 years ago

Are you experiencing some problem? Or you have provided a solution for Angular users? I don't know if I should help you, or not.

Best Regards,


Ollie Vincent pro answered 5 years ago

Personally I would remove any MDB defining colour classes and use this code:

.navbar {
 background-color: pink !important;

chrisbowyer pro commented 5 years ago

Thanks! It is most definitely one solution to the original question. However, after a day of dealing with ridiculous breakages (one example below), I have moved on. .card .card-body h3 {margin-bottom: 0; padding: 0.7rem;}

Ollie Vincent pro commented 5 years ago

Sorry - I don't understand what you are saying...

chrisbowyer pro commented 5 years ago

Well, considering the first part should be clear and the second part may not be clear - unless you think about it. The issue is that the h3 element content ends up looking indented. So hardly an enhancement and more of a cock up. And that's just one thing I noticed.

Ollie Vincent pro commented 5 years ago

Now why couldn't you say that originally... Remove the padding or do something like padding-left:0!mportant

chrisbowyer pro commented 5 years ago

Well, I could have, but you seem to be completely missing the point, as well as that I'm not asking for help. Anyway, thanks for your helpful intentions, over and out. I have wasted enough time on this.

chrisbowyer pro answered 5 years ago

I'm here looking for the same thing. I quite liked my stock standard Bootstrap 4 nav bar but MDB has stuffed it up - not to mention other things. In fact, feeling quite peeved that I splurged out for time-saving relish and it came with time-wasting crap.

ak.leimrey pro answered 6 years ago

Five Months and not a single answer? Because I would require the same information to that problem, since simply adding the navbar class into my css doesn't change anything.

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: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No