How to realize such a bootstrap fixed-top navbar menu with background image and arrow down on active item

Question

I'm using boostrap 4 and trying to realize such a navbar: https://www.dropbox.com/s/0l9kmeirf04x39e/navbar_desired.jpg

The navbar is fixed-bottom, and has to be fixed-top after scrolling down the viewports height. This works perfectly with this html code:

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-bottom" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="img/logo_small.png"></a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav navbar-center ml-auto my-2 my-lg-0">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#a">Link 1</a>
          </li>
          <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#b">Link 2</a>
            </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#c">Link 3</a>
          </li>
          <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#d">Link 4</a>
            </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#e">Link 5</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Masthead -->
  <header id="home" class="masthead">
    <div class="container-fluid h-100">
      <div class="row content">
        <div class="col-10 offset-1 col-xs-12 offset-xs-0 align-self-end">
          <div id="brand-fixed-masthead"><img src="img/logo_big.png"></div>
          <h1 class="text-white mt-5">Lorem ipsum dolor sit amet.</h1>
          <p class="text-white text-uppercase font-weight-light mb-5">Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </header>

and this portion of jQuery:

  // Collapse Navbar
  var distance = $('#mainNav').offset().top;
  var navheight = $('#mainNav').outerHeight();
  var navbarCollapse = function () {
    if ($(window).scrollTop() >= distance) {
      $('#mainNav').removeClass('fixed-bottom');
      $('#mainNav').addClass('fixed-top');
      $('#intro').addClass('masthead-fixed-top');
    } else if ($(window).scrollTop() <= distance) {
      $('#mainNav').removeClass('fixed-top');
      $('#mainNav').addClass('fixed-bottom');
      $('#intro').removeClass('masthead-fixed-top');
    }

  };

  // Collapse now if page is not at top
  navbarCollapse();

  // Collapse the navbar when page is scrolled
  $(window).scroll(navbarCollapse);

This is what I have right now: https://www.dropbox.com/s/h8a5s5jlm3y4l37/navbar_now.jpg

But I have no clue how to bring in the backgrounded arrow down on the active link items.

Suggestions are very welcome.

Answer 1

Don't worry you won't need any glue to do this.

use css :after to create the arrow

:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 50px #e15915;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

and apply it with your active class to the clicked element.

https://codepen.io/carlos27/pen/WBqWPp

I added the jQuery as well. I hope this helps.