CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapbootstrap-4
Blank
Blank

Reputation: 155

Bootstrap 4 - Transparent sticky navbar

I'm currently developing a page with sticky nav, but my main issue is that I'm using multiple sections with images as background and the nav is of course transparent. The really important thing is that the logo is above the nav, so I really have to use display: sticky; (or .sticky-top). How do I make it visible on every section?

html,
body {
  width: 100% !important;
}

body {
  background: grey !important;
}


/*Header*/

.logo {
  display: inline-block;
  padding: 1rem 0 .5rem 0 !important;
}


/* NavBar */

nav {
  font-size: 13pt;
  font-family: 'Cinzel', sans-serif;
  padding: .3rem 0 .3rem 0 !important;
  text-transform: capitalize;
}

.nav-link {
  color: #fff !important;
  margin: 0 25% 0 25%;
}

.nav-link:hover {
  font-style: underline;
}

section {
  height: 100vh;
  min-height: 900px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.Text {
  margin-top: 20%;
}
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="stylesheet/stylesheet.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
  <script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</head>

<body>
  <main class="container-fluid p-0">
    <section class="pr-5 pl-5" style="background-image: url('https://picsum.photos/1920/1080/?random');">
      <header>
        <img class="logo d-block img-fluid mx-auto" width="200px" src="http://brandmark.io/logo-rank/random/pepsi.png" alt="Logo" />
      </header>
      <nav class="navbar navbar-expand-lg sticky-top">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
                        </button>
        <div class="collapse navbar-collapse" id="Toogle">
          <ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Repliky</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Unikáty</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Instalace</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Kontakt</a>
            </li>
          </ul>
        </div>
      </nav>
      <div class="row Text no-gutters ">
        <div class="col-xs-12 col-md-4 offset-md-1">
          <h2>I need this block of text to be responsive</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ex inventore vel error quibusdam animi fugiat, doloribus dolores consectetur nulla deleniti sint blanditiis quod debitis quis vitae officiis tempora numquam.</p>
          <a href="#" class="button white">Watch video</a>
        </div>
      </div>
    </section>
    <section class="test" style="background-image: url('https://picsum.photos/1920/1080/?random');">
      <p>nofun</p>
    </section>
    <section class="test" style="background-image: url('https://picsum.photos/1920/1080/?random');">
      <p>nofun</p>
    </section>
  </main>
</body>

</html>

Upvotes: 0

Views: 5504

Answers (2)

WebDevBooster
WebDevBooster

Reputation: 14954

Here's the solution:

Take the navbar and the logo out and place them above all sections. The logo and the navbar together are 256px high.

So, apply margin-top: -256px; padding-top: 256px; to the first section and you're done!

margin-top: -256px; moves the first section up 256px and padding-top: 256px; gives it 265px top padding. That makes the whole thing look the same as before but now your navbar and logo header are independent from the sections. That's why it works.

Here's the full, working code snippet (click "run code snippet" below and expand to full page): 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<main class="container-fluid p-0">
    <header>
        <img class="logo d-block img-fluid mx-auto" width="200px" src="http://brandmark.io/logo-rank/random/pepsi.png" alt="Logo" />
    </header>
    <nav class="navbar navbar-expand-lg sticky-top">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
        </button>
        <div class="collapse navbar-collapse" id="Toogle">
            <ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Repliky</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Unikáty</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Instalace</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Kontakt</a>
                </li>
            </ul>
        </div>
    </nav>

    <section class="pr-5 pl-5" style="background-image: url('https://picsum.photos/1920/1080/?random'); margin-top: -256px; padding-top: 256px;">
        <div class="row Text no-gutters">
            <div class="col-xs-12 col-md-4 offset-md-1">
                <h2>I need this block of text to be responsive</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ex inventore vel error quibusdam animi fugiat, doloribus dolores consectetur nulla deleniti sint blanditiis quod debitis quis vitae officiis tempora numquam.</p>
                <a href="#" class="button white">Watch video</a>
            </div>
        </div>
    </section>
    <section class="test" style="background-image: url('https://picsum.photos/1920/1080/?random'); height: 999px;">
        <p>section 2</p>
    </section>
    <section class="test" style="background-image: url('https://picsum.photos/1920/1080/?random'); height: 999px;">
        <p>section 3</p>
    </section>
</main>

Upvotes: 2

Fernando Le&#243;n
Fernando Le&#243;n

Reputation: 514

Create a css class called transparent, and use this code.

.navbar .transparent .navbar-inverse .navbar-inner {
    background-color: rgba(92, 184, 92, 0.8);
}

And the navbar code:

<nav class="navbar fixed-top navbar-light navbar-toggleable-md navbar-inverse transparent">

.....

</nav>

Upvotes: 0

Related Questions