Topic: How To change Navbar Background Color

kodero pro asked 5 years ago

Hello, Im trying to change the background color of Navbar thorugh custom "style.css", but it seem not working after adding new class for changing the background color. The example code is below : <!--Navbar --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar nvbr"> .nvbr { background-color: #404acd; }   Can you advised how to change the background color of navbar using custom style sheet. Thanks


it works with me after using ::ng-deep

.scss file

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


 <mdb-navbar SideClass="navbar navbar-expand-lg  navbar-dark "class="navCss" [containerInside]="true">

Marta Wierzbicka staff commented 3 years ago


for MDB Angular package, please select correct technology "Angular" on our forum.

Best, Marta

Marta Wierzbicka staff answered 5 years ago

Hi, I don't know why my solution doesn't work in your project because it does in mine. Anyway, I'm glad you found your own solution. If you find something, don't hesitate to write us. Best, Marta

Elcox pro commented 4 years ago

Hello, Marta! Many thanks! Your two-step solution works perfectly; i now have the black navbar I need for my Home Page. Best wishes, Alex Ross, Oxford.

Marta Wierzbicka staff commented 4 years ago

Hi, you're welcome. Best, Marta

rocini.jr free answered 5 years ago

Hello Marta! Tks for reply! I think it's a good deal to report what I did to sove the issue... For first, as I said, none of any css declared on the style.css was working. I changed the file, removed classes, changed the order, even included only the color class for the nav background, as below: .bgd-blue { background: #014464!important; background: -moz-linear-gradient(top, #0272a7, #013953)!important; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953))!important; /*padding: 4px, 16px, 4px, 16px;*/ } Nevermind about the code, it's just a test. And yes, it works with mdb, cause I declared it directly on the nav tag, as a style. Worked perfectly. So, for testing, I created another file for personal css, called my-default.css, and declared it on the HTML head file. Nothing happens again! Of course, lot of mistakes could be made at this point, but I check all that I could. Paths, tags closing, sintaxe, server configs (I have my own servers at home), navigators, operating systems (windows, linux, android, solaris, IOS), etc... After all, like a dead end street, I restarted from the ground. Took a new copy of the MDB, backup my custom files from the server, deleted the old copy and installed the new one, putting back my files on this new fresh of MDB copy. And IT'S WORKING NOW!!! Amazing, but this is exactly what I did. Deleted the old one and installed a fresh copy, preserving my files (style.css and index.html). But, I still trying to figure out where the problem were. Maybe a corrupted file on the first download, maybe problem copying files to the directory, I don't know yet. But, despite the "solution" (this isn't one for me), I'll keep looking for this problem's cause and, if I find it, I'll report for feed-back purposes. Also, thank you very much for your attention and the nice job been done here!   Att, Rocini Junior

Marta Wierzbicka staff answered 5 years ago

Hi, I'll try to help once again. First step: go to your style.css file and paste code like this and save: .navbar { background-color: #e91e63; } Second step: go to your index.html file and remove our color class from the navbar and save the file. Instead of this: <nav class="navbar navbar-expand-lg navbar-dark primary-color"> do this: <nav class="navbar navbar-expand-lg navbar-dark">.   After that, a background color of navbar will change. Best, Marta

rocini.jr free answered 5 years ago

Hi!!! Unfortunately, I have this exact same problem... Just started to test the MDB this week, using a fresh download with the original files and original navbar on the examples... The new color defined on the "style.css" simply doesn't work.   Any idea about this? TKS!

Marta Wierzbicka staff answered 5 years ago

Hi .jonathan., could you provide any demo or code and describe your problem in details? Best, Marta

Marta Wierzbicka staff answered 5 years ago

Hi, try to add !important to a color. Like this: background-color: #404acd !important;. Best, Marta

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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No