Changing Navbar color to custom hex color?

Topic: Changing Navbar color to custom hex color?

Gadgethakcer free 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 free answered 5 years ago

2 0 Best answer

What I have used is

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

So, when I am doing

<pre class="prettyprint"><code>.navbar 
{
 background-color: pink !important;
}
</code></pre>

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

<pre class="prettyprint"><code>::ng-deep .navCss nav
{
 background-color: #CEDD43;
}
</code></pre>

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

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

Please insert min. 20 characters.

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 5 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 6 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 6 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 6 years ago

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

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

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

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

chrisbowyer pro answered 6 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

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

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