Clever Geek Handbook

How to make Twitter Bootstrap Navbar transparent?

I am trying to make my bootstrap navbar

transparent. I am using bootstrap navbar-inverse

and am trying to add opacity rgba()

. I want my navbar to be transparent as shown in the image below:

enter image description here

@font-face {
  font-family: FuturaBook;
  src: url('fonts/FuturaStd-Light_1.otf');
}
body{
  font-family: 'FuturaBook', Arial, sans-serif;
}

/***************************************************************************
Navigation Bar
****************************************************************************/

.navbar-inverse{
  background-color: rgba(34, 34, 34, 0.5);
  border-bottom: none;

}

.navbar-header{
  width:100%;
  height: 90px;

}
.navbar-header #brand{
  font-family: 'FuturaBook', Arial, sans-serif;
  color: white;
  font-size: 20pt;
  margin-top: 20px;
  text-transform: uppercase;

}

.mynav li 
{
  list-style: none;
  display: inline-block;
  border-left: 1px solid white;
  padding-top: 36px;
  padding-left: 10px;
  padding-right: 10px;
  /* margin-top: 16px; */
  height: 90px;
}
.mynav li:last-child{
  border-right: 1px solid white;
} 

.mynav li a{
  color:white;
}
.mynav li a:hover{
  text-decoration: none;
}
/* .mynav li a:active{
background-color: black;
}*/
      

        
        
        
      

    
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <nav class="navbar navbar-transparent navbar-inverse">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#" id="brand">Fashion Garage</a>

        <div class="mynav pull-right">
          <ul>
            <li><a href="">TRENDS</a></li>
            <li><a href="">PRODUCTS</a></li>
            <li><a href="">DESIGNERS</a></li>
            <li><a href="">MEMBERS</a></li>
            <li><a href="">SEARCH</a></li>
            <li><a href="">MY ACCOUNT</a></li>
          </ul>
        </div><!-- /mynav -->
      </div><!-- /navbar-header -->
    </div><!-- /container -->

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="img/lady-1.jpg" alt="Lady-1">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="img/lady-2.jpg" alt="Lady-2">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        ...
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </nav><!-- /nav -->

</div><!-- /wrapper -->
Run codeHide result


new nav with white background

+3


source to share


4 answers


If you still have problems, I suggest just getting started and using this: It's pretty simple and straight forward. Don't add another class to navbar

just the sentence. Also you can replace the link with Bootstrap CSS and JS. It's just a CDN link. Here's the result if you're interested.

enter image description here



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<style type="text/css">
    body{
        background-image: url('http://seamlesspatternchecker.com/hash/seamless-pattern-samples/a/3/5/a35-vector-vector-seamless-simple-pattern-curtain-design-modern-stylish-texture-repeating-abstract-158117696.jpg');
    }

    .navbar{
        border: none;
        border-radius: 0;
        background-color: rgba(0,0,0,0.5);
    }
</style>

<body>
    <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
</body>
+2


source


In a part of your site, load a new custom CSS file after the default loading stylesheet.

<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>


In your custom.css

.navbar {
    background-color: transparent;
    background: transparent;
    border-width: 0px;
}
+1


source


Try the following:

.navbar {
   background-color: transparent;
   background: transparent;
}

.navbar li { color: #000 }

Update: In the CSS

seconde line, replace: <nav class="navbar navbar-transparent navbar-inverse">

with<nav class="navbar navbar-transparent">

Possible answers:

Bootstrap-3 navbar transparent color

css to make a transparent transparent navbar

0


source


Here is my code pen which I tried to make the navigation bar transparent and responsive. Hope this helps you.

<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMain">
  <span class="glyphicon glyphicon-chevron-right" style="color:white;"></span>

  </button>

You can find the rest of the code here

0


source






More articles:


All Articles