Transparent Navbar Bootstrap

Question

Good afternoon,

How do I make my page start with the transparent navbar and when I give the Scroll down it stay as "inverse"? I’ve tried to give a background-color: transparent !important, but it got weird, as for scroll, I didn’t really understand this function of Jquery. Could you give me an example, please?

Answer 1

In the of example we have the following Jquery code snippet on filing cabinet:

// Offset for Main Navigation
$('#mainNav').affix({
  offset: {
    top: 100
  }
})

.affix-top {
  background-color: transparent !important;
}

.affix {
  background-color: black;
}

h1 {
  margin-top: 100px !important;
}

header {
  position: relative;
  width: 100%;
  min-height: auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: center;
  background-image: url('https://blackrockdigital.github.io/startbootstrap-creative/img/header.jpg');
  text-align: center;
  color: white;
  display: table !important;
}

.navbar-nav {
    background: #f8f8f8;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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> Menu <i class="fa fa-bars"></i>
      </button>
      <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a class="page-scroll" href="#about">About</a>
        </li>
        <li>
          <a class="page-scroll" href="#services">Services</a>
        </li>
        <li>
          <a class="page-scroll" href="#portfolio">Portfolio</a>
        </li>
        <li>
          <a class="page-scroll" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

<header>
  <div class="header-content">
    <div class="header-content-inner">
      <h1 id="homeHeading">Your Favorite Source of Free Bootstrap Themes</h1>
      <p> Duis pharetra, mauris et eleifend pretium, mauris est suscipit eros, et blandit lectus velit nec turpis. Morbi ullamcorper tortor a viverra interdum. Proin bibendum mattis est et maximus. Praesent tristique arcu sed consequat molestie. Etiam id
        hendrerit felis. Ut lobortis erat neque, at dictum tortor cursus eget. Donec consequat nisl at semper iaculis. Phasellus eros lacus, porta in sagittis at, congue sed dolor.</p>

      <p>Curabitur nec tortor sagittis, elementum ipsum et, commodo libero. Vestibulum mattis ultricies luctus. Sed sem justo, aliquam id aliquet quis, accumsan a magna. Quisque non fringilla leo, vel rutrum metus. Aliquam placerat, orci nec finibus suscipit,
        erat eros volutpat leo, eget maximus sapien enim in arcu. Curabitur aliquet tortor quam, quis bibendum leo rutrum in. Quisque vitae lobortis augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus
        sagittis leo et consequat bibendum. Nunc cursus lectus non sem laoreet, ut vulputate dolor malesuada.</p>

      <p>Ultricies metus. Sed vel tincidunt quam. Duis et justo hendrerit, ultrices elit non, mollis erat. Nunc porta accumsan dolor. Ut ut enim scelerisque, pretium odio ac, blandit nunc. Duis dapibus bibendum mi mattis sollicitudin. Proin dictum commodo
        dolor ut venenatis.</p>

      <p>Quisque sed urna accumsan, posuere ex nec, tempor lacus. Pellentesque hendrerit sodales felis, sit amet maximus elit convallis in. Aenean lorem erat, ornare vitae iaculis vitae, gravida et metus. Nulla molestie placerat turpis eget vestibulum. Pellentesque
        aliquet massa ipsum, et ultrices dolor ornare vitae. Nulla consectetur aliquam quam sed sollicitudin. Aenean porttitor mollis feugiat. Integer a magna sit amet dui hendrerit bibendum non sit amet nisl. Donec tristique nunc non lorem ultrices venenatis.
        Aliquam erat volutpat. Quisque ac dignissim dui, luctus pellentesque turpis. Duis lectus felis, vulputate non purus a, efficitur dignissim tortor. Aliquam nec nunc viverra, commodo augue sit amet, molestie nisl. Quisque consequat fermentum turpis,
        id mattis nibh aliquet sed. </p>

<p>Quisque sed urna accumsan, posuere ex nec, tempor lacus. Pellentesque hendrerit sodales felis, sit amet maximus elit convallis in. Aenean lorem erat, ornare vitae iaculis vitae, gravida et metus. Nulla molestie placerat turpis eget vestibulum. Pellentesque
        aliquet massa ipsum, et ultrices dolor ornare vitae. Nulla consectetur aliquam quam sed sollicitudin. Aenean porttitor mollis feugiat. Integer a magna sit amet dui hendrerit bibendum non sit amet nisl. Donec tristique nunc non lorem ultrices venenatis.
        Aliquam erat volutpat. Quisque ac dignissim dui, luctus pellentesque turpis. Duis lectus felis, vulputate non purus a, efficitur dignissim tortor. Aliquam nec nunc viverra, commodo augue sit amet, molestie nisl. Quisque consequat fermentum turpis,
        id mattis nibh aliquet sed. </p>
<p>Quisque sed urna accumsan, posuere ex nec, tempor lacus. Pellentesque hendrerit sodales felis, sit amet maximus elit convallis in. Aenean lorem erat, ornare vitae iaculis vitae, gravida et metus. Nulla molestie placerat turpis eget vestibulum. Pellentesque
        aliquet massa ipsum, et ultrices dolor ornare vitae. Nulla consectetur aliquam quam sed sollicitudin. Aenean porttitor mollis feugiat. Integer a magna sit amet dui hendrerit bibendum non sit amet nisl. Donec tristique nunc non lorem ultrices venenatis.
        Aliquam erat volutpat. Quisque ac dignissim dui, luctus pellentesque turpis. Duis lectus felis, vulputate non purus a, efficitur dignissim tortor. Aliquam nec nunc viverra, commodo augue sit amet, molestie nisl. Quisque consequat fermentum turpis,
        id mattis nibh aliquet sed. </p>
<p>Quisque sed urna accumsan, posuere ex nec, tempor lacus. Pellentesque hendrerit sodales felis, sit amet maximus elit convallis in. Aenean lorem erat, ornare vitae iaculis vitae, gravida et metus. Nulla molestie placerat turpis eget vestibulum. Pellentesque
        aliquet massa ipsum, et ultrices dolor ornare vitae. Nulla consectetur aliquam quam sed sollicitudin. Aenean porttitor mollis feugiat. Integer a magna sit amet dui hendrerit bibendum non sit amet nisl. Donec tristique nunc non lorem ultrices venenatis.
        Aliquam erat volutpat. Quisque ac dignissim dui, luctus pellentesque turpis. Duis lectus felis, vulputate non purus a, efficitur dignissim tortor. Aliquam nec nunc viverra, commodo augue sit amet, molestie nisl. Quisque consequat fermentum turpis,
        id mattis nibh aliquet sed. </p>

<p>Quisque sed urna accumsan, posuere ex nec, tempor lacus. Pellentesque hendrerit sodales felis, sit amet maximus elit convallis in. Aenean lorem erat, ornare vitae iaculis vitae, gravida et metus. Nulla molestie placerat turpis eget vestibulum. Pellentesque
        aliquet massa ipsum, et ultrices dolor ornare vitae. Nulla consectetur aliquam quam sed sollicitudin. Aenean porttitor mollis feugiat. Integer a magna sit amet dui hendrerit bibendum non sit amet nisl. Donec tristique nunc non lorem ultrices venenatis.
        Aliquam erat volutpat. Quisque ac dignissim dui, luctus pellentesque turpis. Duis lectus felis, vulputate non purus a, efficitur dignissim tortor. Aliquam nec nunc viverra, commodo augue sit amet, molestie nisl. Quisque consequat fermentum turpis,
        id mattis nibh aliquet sed. </p>
<p>Quisque sed urna accumsan, posuere ex nec, tempor lacus. Pellentesque hendrerit sodales felis, sit amet maximus elit convallis in. Aenean lorem erat, ornare vitae iaculis vitae, gravida et metus. Nulla molestie placerat turpis eget vestibulum. Pellentesque
        aliquet massa ipsum, et ultrices dolor ornare vitae. Nulla consectetur aliquam quam sed sollicitudin. Aenean porttitor mollis feugiat. Integer a magna sit amet dui hendrerit bibendum non sit amet nisl. Donec tristique nunc non lorem ultrices venenatis.
        Aliquam erat volutpat. Quisque ac dignissim dui, luctus pellentesque turpis. Duis lectus felis, vulputate non purus a, efficitur dignissim tortor. Aliquam nec nunc viverra, commodo augue sit amet, molestie nisl. Quisque consequat fermentum turpis,
        id mattis nibh aliquet sed. </p>


      <p>Ultricies metus. Sed vel tincidunt quam. Duis et justo hendrerit, ultrices elit non, mollis erat. Nunc porta accumsan dolor. Ut ut enim scelerisque, pretium odio ac, blandit nunc. Duis dapibus bibendum mi mattis sollicitudin. Proin dictum commodo
        dolor ut venenatis.</p>

      <p> Duis pharetra, mauris et eleifend pretium, mauris est suscipit eros, et blandit lectus velit nec turpis. Morbi ullamcorper tortor a viverra interdum. Proin bibendum mattis est et maximus. Praesent tristique arcu sed consequat molestie. Etiam id
        hendrerit felis. Ut lobortis erat neque, at dictum tortor cursus eget. Donec consequat nisl at semper iaculis. Phasellus eros lacus, porta in sagittis at, congue sed dolor.</p>
      <p> Duis pharetra, mauris et eleifend pretium, mauris est suscipit eros, et blandit lectus velit nec turpis. Morbi ullamcorper tortor a viverra interdum. Proin bibendum mattis est et maximus. Praesent tristique arcu sed consequat molestie. Etiam id
        hendrerit felis. Ut lobortis erat neque, at dictum tortor cursus eget. Donec consequat nisl at semper iaculis. Phasellus eros lacus, porta in sagittis at, congue sed dolor.</p>

      <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
    </div>
  </div>
</header>

This snippet of Jquery code below causes the div containing the id="Mainnav" to be incremetada with the class="affix-top" or class="affix", depending on the height.

// Offset for Main Navigation
$('#mainNav').affix({
offset: {
top: 100
}
})

So Voce can write to your css in different colors for each class currently incremented.

example:

.affix-top {
  background-color: transparent;
}
.affix{
  background-color: black;
}