Changing Navbar color to custom hex color?

Topic: Changing Navbar color to custom hex color?

Gadgethakcer asked 7 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.?

Add comment

P Satish Patro answered 6 years ago

2 0 Best answer

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 6 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

Add comment

Ollie Vincent pro answered 7 years ago

1 0 Best answer

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

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

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

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

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

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

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

Add comment

ak.leimrey pro answered 7 years ago

0 0 Best answer

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.

Add comment

chrisbowyer pro answered 7 years ago

0 0 Best answer

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.

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

User: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Gadgethakcer

2Support score
1Questions 0Answers

0Snippets likes 0Snippets