0

Could someone tell me how to change the opacity of this navbar without changing the opacity of the text on navbar? Also, could someone tell me how to change the color of text on navbar?

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

**Above mentioned is a bootstrap navbar code. Could someone please tell me how to change the opacity of this navbar without changing the opacity of the text on navbar?Please also tell me how to change the color of text on navbar?**
Dominique Fortin
  • 2,212
  • 15
  • 20
Arun Upreti
  • 28
  • 4

3 Answers3

1

Just change background color of navbar (rgba).

.navbar {
   background: rgba(255, 0, 0, 0.5); // 0.5 is opacity
}

Docs: https://www.w3schools.com/cssref/func_rgba.asp

chojnicki
  • 3,148
  • 1
  • 18
  • 32
  • I've already tried doing this. It's not working – Arun Upreti Sep 05 '20 at 17:02
  • Yeah it is working. Just remove "bg-light" from classes because you are overwriting this. – chojnicki Sep 05 '20 at 17:04
  • Yeah now it worked. Thankyou – Arun Upreti Sep 05 '20 at 17:10
  • Could you also please tell me how to change the text colour? – Arun Upreti Sep 05 '20 at 17:10
  • @ArunUpreti "*Could you also please tell me how to change the text colour?*" I've already one that in my answer :) – FluffyKitten Sep 05 '20 at 17:12
  • If you are compiling sass then navbar color can be changed in _variables.scss. Or simply do not use build-in navbar themes (navbar-light or navbar-dark) because it does not make sense if you are wanna replace both background and text color (these classes are responsible exactly for that). If for some reason you wanna keep navbar-light then just use text-xxx for example text-black inside navbar content. – chojnicki Sep 05 '20 at 17:15
  • Ale please - one problem per question at once. Otherwise it is against stackoverflow rules and question can be removed. – chojnicki Sep 05 '20 at 17:16
  • @chojnicki Yes that is true, but in this case they are closely related (and both based on the used of the same bootstrap class) so I don't think its an issue here. – FluffyKitten Sep 05 '20 at 17:17
1

To make your navbar semi-transparent without affecting the contents, you can just use a semi-opaque colour.

You need to do 2 things:

  1. remove the navbar-light class from your navbar - this is what is currently adding the colour.
  2. Add your own CSS with the colour you want. You can use RGBA colours to specify an opacity, or the transparent channel in HEX, e.g.
background-color: rgba(248, 249, 250, 0.5); /* RGBA colour with 0.5 (i.e. 50%) 
background-color: rgb(248 249 250 / 0.5); /* RGB colour with 0.5 (i.e. 50%) opacity  */
/* OR */
background-color: #f8f9fa80; /* HEX colour with HEX 80 (i.e. 50%) opacity  */

Note that you also need to use !important (unfortunately - this is usually bad practice!) because of the way the Bootstrap classes are set up:

nav.navbar {
  background-color: rgb(248 249 250 / 0.5)!important
}

Change the colours of the nav links: This is also defined by the Bootstrap classes, so the best thing is to use the element inspector to find the existing classes and override them - see the working snippet below.

Dropdown Menu If you also want to change the text colour abd opacity of the dropdown menu, you canadd the following:

.dropdown-menu{  background: rgba(255, 255, 255, 0.5);  }
.dropdown-item { color: #green;  }

Working Example:

nav.navbar {
  background-color: rgb(248 249 250 / 0.5)!important;
}

/* OVERRIDE BOOTSTRAP NAV CLASSES */
.navbar-nav .nav-link {
    color: red;
}
.navbar-nav .active>.nav-link, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show, .navbar-nav .show>.nav-link {
    color: blue;
}

/* OVERRIDE BOOTSTRAP DROPDOWN NAV CLASSES */
.dropdown-item {
    color: green;
}   
.dropdown-menu {  
    background: rgba(255, 255, 255, 0.5);  
}

/* For demo only to show transparency */
.page {
  background: url(http://placekitten.com/500/500) repeat;
  height: 100vh
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="page">
  <nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</div>
FluffyKitten
  • 13,824
  • 10
  • 39
  • 52
0

check out rgba():

https://www.w3schools.com/cssref/func_rgba.asp

background-color: rgba(255,0,0,0.3); // 0.3 opacity
SteinTheRuler
  • 3,549
  • 4
  • 35
  • 71