Twitter Bootstrap Question posted in

How to make Twitter Bootstrap Navbar transparent?

I am trying to make my bootstrap navbar transparent. I am using bootstrap navbar-inverse and trying to add opacity by 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 -->

new nav with white background

Tags:

4

Answers


  1. 0

    Try this:

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

.navbar li { color: #000 }

    Update:
    On CSS seconde line replace: <nav class="navbar navbar-transparent navbar-inverse"> to <nav class="navbar navbar-transparent">

    Possible answers:

    Transparent color of Bootstrap-3 Navbar

    css to make bootstrap navbar transparent

    Login or Signup to reply.
  2. 0

    If you’re still having problems I suggest just start over and use this :
    It’s pretty simple and straight forward. Don’t add another class to navbar just a suggestion. Also you can replace the link of the Bootstrap CSS and JS. It’s just the CDN link. Here’s the output if your’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>
    Login or Signup to reply.
  3. 0

    In the portion of your website, load your new custom CSS file after the default bootstrap 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;
}
    Login or Signup to reply.
  4. 0

    Here is my code pen which i have tried making the navigation bar transparent and responsive. Hope it 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search