Topic: Changing Navbar color to custom hex color?

Gadgethakcer free asked 5 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 3 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"
  [containerInside]="false">

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

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

So, when I am doing

.navbar 
{
     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"
  [containerInside]="false">

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 3 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,

Damian


Ollie Vincent pro answered 4 years ago


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

.navbar {
 background-color: pink !important;
}

chrisbowyer pro commented 4 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 4 years ago

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

chrisbowyer pro commented 4 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 4 years ago

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

chrisbowyer pro commented 4 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 4 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 4 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.

FREE CONSULTATION

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

Status

Answered

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