Topic: skin navbar color

flynstone free asked 4 years ago

Is there a way to set the skin-navbar color to a gradient color?

Maybe I am not using the best option to get results I am looking for.. I am creating a list on gradient colors to change navbar color during runtime.

So far the only way I was able to get the navbar color to get to a wanted gradient is:

::ng-deep .navCss nav { background: linear-gradient(to bottom, #6f0000, #200122); }

Konrad Stępień staff answered 4 years ago

Hi @flynstone,

Just paste styles for your style.scss file like this:

.custom-color {
    background: linear-gradient(to bottom, #6f0000, #200122);

And then you can provide a class for the navbar, like this:

<mdb-navbar SideClass="navbar navbar-expand-lg custom-color">

  <!-- Navbar brand -->
  <mdb-navbar-brand><a class="navbar-brand" href="#">Navbar</a></mdb-navbar-brand>

  <!-- Collapsible content -->

      <!-- Links -->
      <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
              <a class="nav-link waves-light" mdbWavesEffect>Home<span class="sr-only">(current)</span></a>
          <li class="nav-item">
              <a class="nav-link waves-light" mdbWavesEffect>Features</a>
          <li class="nav-item">
              <a class="nav-link waves-light" mdbWavesEffect>Pricing</a>

          <!-- Dropdown -->
          <li class="nav-item dropdown" dropdown>
              <a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
              Basic dropdown<span class="caret"></span></a>
              <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
                  <a class="dropdown-item waves-light" mdbWavesEffect href="#">Action</a>
                  <a class="dropdown-item waves-light" mdbWavesEffect href="#">Another action</a>
                  <a class="dropdown-item waves-light" mdbWavesEffect href="#">Something else here</a>
                  <div class="divider dropdown-divider"></div>
                  <a class="dropdown-item waves-light" mdbWavesEffect href="#">Separated link</a>

      <!-- Links -->

<!-- Search form -->
      <form class="form-inline waves-light" mdbWavesEffect>
          <div class="md-form my-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search">
  <!-- Collapsible content -->


Please try my way.

Best, Konrad.

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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.1.0
  • Device: PC
  • Browser: Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: No