Add top bar above nav bar using Bootstrap

0
votes

My first time trying to build a page from scratch and not using a template. I want to have a fixed top bar over the nav bar. Like this: https://inspirothemes.com/polo/header-topbar-transparent.html

Here is my code now:

window.onscroll = function() {
  scrollFunction();
};

var first = true;

function scrollFunction() {
  if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
    document.getElementById("navbar").classList.add('fixed-navbar');
  } else {
    document.getElementById("navbar").classList.remove('fixed-navbar');
  }
}
.navbar {
    position: absolute !important;
    width: 100%;
    transition: all .5s;
}

.navbar-nav>li {
    padding-left: 10px;
    padding-right: 10px;
}

.nav-item a {
    text-decoration: none;
    outline: none;
    color: #ffffff;
    opacity: 1;
    font-weight: 600;
    font-size: .85em;
}

.nav-item a:hover {
    opacity: 0.5;
    transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -webkit-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
}

.hero {
    width: 100%;
    height: 90vh;
    background: url('https://loremflickr.com/1024/768');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.fixed-navbar {
    background: white;
    top: 0;
    position: fixed !important;
    animation-name: fixedAnim;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    -webkit-box-shadow: 0 12px 6px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0 12px 6px rgba(0, 0, 0, 0.06);
    box-shadow: 0 12px 6px rgba(0, 0, 0, 0.06);
    /*-1px 6px 13px 0px rgba(0, 0, 0, 0.44);*/
}

.fixed-navbar a {
    color: #000;
}

.navbar.fixed-navbar .navbar-collapse {
    background: #fff !important;
}

.navbar.fixed-navbar .navbar-toggler span {
    background: #000 !important;
}

.navbar.fixed-navbar .logo-dark {
    display: inline-block !important;
}

.navbar.fixed-navbar .logo-light {
    display: none !important;
}


@keyframes fixedAnim {
    from {
        top: -50px;
    }

    to {
        top: 0;
    }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">


<nav id="navbar" class="navbar navbar-expand-sm">
        <a class="navbar-brand ml-4" href="#">
            <img src="http://via.placeholder.com/30x30" alt="" width="30" height="90" class="d-inline-block align-top logo-light" id="navlogo">
            <img src="http://via.placeholder.com/30x30" alt="" width="30" height="90" class="d-none align-top logo-dark" id="navlogo">
        </a>
        <button class="navbar-toggler collapsed border-0" id="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
            <span> </span>
            <span> </span>
            <span> </span>
        </button>
        <div class="navbar-collapse collapse text-right" id="navbarsExample04">
            <ul class="navbar-nav ml-auto mr-4 text-uppercase">
                <li class="nav-item active">
                    <a class="nav-link" href="#">one</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">two</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">three</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">four</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">five</a>
                </li>
                
            </ul>

        </div>
    </nav>

    <main role="main">

        <section class="hero">
            <div class="container-fluid">

            </div>
        </section>


        <div class="background-white">
            <h1>Navbar example</h1>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>

            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>

            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>

            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>

            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>

            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>

        <a class="btn btn-lg btn-primary" href="../components/navbar/" role="button">View navbar docs &raquo;</a>
        </div>
    </main>

    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

How can I make a top bar about the nav that acts like the one in the example provided? I would like to utilize as much of Bootstrap as possible.

Edit:

If I add this to above the nav bar, it is not transparent. If I add it inside the nav bar, it doesn't disappear:

<div class="d-block">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <ul class="top-menu">
                    <li><a href="#"><i class="fa fa-phone"></i> Phone</a></li>
                    <li><a href="#"><i class="fa fa-envelope"></i> Email</a></li>
                </ul>
            </div>
            <div class="col-md-6 d-none d-md-block">
                <li><a href="#"><i class="fa fa-phone"></i> Phone</a></li>
                <li><a href="#"><i class="fa fa-envelope"></i> Email</a></li>
            </div>
        </div>
    </div>
</div>
1
htmlcssbootstrap-4
Add your topbar div content just before the NAV tag. - OMi Shah
Can you give me an example? - jac
@jac in your nav element, before navbar-brand add your top bar. There is no point of example. - ciekals11
@ciekals11 can't put it inside <nav> because then it would not disappear on scroll, If I put it outside of nav, it is not transparent. - jac

1 Answers

2
votes

I have created demo for you you can checkout below link. https://codepen.io/shabbirvaghela/pen/OJbEeEp

Updated code are as below we need to row one for top bar and second for menu list as you can see in code.

header {
  position: absolute !important;
  width: 100%;
  transition: all 0.5s;
}

.top-bar {
  padding: 15px;
  color: #fff;
}
.navbar {
  transition: 0.3s all;
}
header {
  position: absolute !important;
  width: 100%;
  transition: all 0.5s;
}

.top-bar {
  padding: 15px;
  color: #fff;
}
.navbar {
  transition: 0.3s all;
}

<header>
  <div class="top-bar">
    top bar details here
  </div>
  <nav id="navbar" class="navbar navbar-expand-sm">
    <a class="navbar-brand ml-4" href="#">
      <img src="http://via.placeholder.com/30x30" alt="" width="30" height="90" class="d-inline-block align-top logo-light" id="navlogo">
      <img src="http://via.placeholder.com/30x30" alt="" width="30" height="90" class="d-none align-top logo-dark" id="navlogo">
    </a>
    <button class="navbar-toggler collapsed border-0" id="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
      <span> </span>
      <span> </span>
      <span> </span>
    </button>
    <div class="navbar-collapse collapse text-right" id="navbarsExample04">
      <ul class="navbar-nav ml-auto mr-4 text-uppercase">
        <li class="nav-item active">
          <a class="nav-link" href="#">one</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">two</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">three</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">four</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">five</a>
        </li>

      </ul>

    </div>
  </nav>
</header>