How to make a navbar transparent?

Topic: How to make a navbar transparent?

Pedro Aneyba Fernandez Davila free asked 4 years ago

*Expected behavior*I want my navbar to become transparent so I can see through it.

*Actual behavior*I can't modify the color of the navbar, not even using !important tags.

*Resources (screenshots, code snippets etc.)*This is the actual code`

<ul class="navbar-nav ml-auto nav-flex-icons">
  <li class="nav-item">
    <a class="nav-link">
      <mdb-icon fab icon="twitter"></mdb-icon>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link">
      <mdb-icon fab icon="google-plus"></mdb-icon>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link">
      <div class="btn-group" mdbDropdown>
        <mdb-icon fas icon="user" mdbDropdownToggle></mdb-icon>
        <div class="dropdown-menu dropdown-menu-right dropdown-primary">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div class="divider dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
    </a>
  </li>
</ul>

`and this is the scss i've tried on it:

.navbar { background-color: transparent;}

I've also used:

.navbar { background: transparent;}

without avail

Add comment

Konrad Stępień staff answered 4 years ago

0 0 Best answer

<p>Hi <a href="/profile/?id=91468" target="_blank" rel="nofollow">@Pedro Aneyba Fernandez Davila</a>, </p>

<p>Just do not add class like <code>indygo</code> for your navbar. </p>

<p>Try the code below.</p>

<pre class="prettyprint"><code>
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-light"> //remove class `indygo` from here

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

<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>
      <li class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect>Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect>Pricing</a>
      </li>

<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>
        </div>
      </li>

</ul>

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

</mdb-navbar>

</code></pre>

<p>Best, Konrad.</p>

Please insert min. 20 characters.

Hi @Pedro Aneyba Fernandez Davila,

Just do not add class like indygo for your navbar.

Try the code below.

<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-light"> //remove class `indygo` from here

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

  <!-- Collapsible content -->
  <links>

    <!-- 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>
      <li class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect>Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect>Pricing</a>
      </li>

      <!-- 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>
        </div>
      </li>

    </ul>
    <!-- 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">
      </div>
    </form>
  </links>
  <!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->

Best, Konrad.

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: MDB Angular
MDB Version: 8.3.1
Device: computer
Browser: chrome
OS: windows 7
Provided sample code: No
Provided link: No

Pedro Aneyba Fernandez Davila

5Support score
1Questions 0Answers 0Snippets