Bootstrap 4 sticky navbar with subsequent section under it

Question

I am trying to get a Bootstrap 4 sticky navbar to be transparent at first. I want to see the background color of the subsequent section element. When the user starts scrolling (> 50px), I want the navbar to fade to white.

I think I'm almost there but the problem is that the subsequent section element is stacked below the navbar, so I am always seeing a white navbar. If I position the subsequent section absolutely, the rest of the layout also comes upward.

Here's the code I have so far:

<nav class="navbar sticky-top navbar-light bg-faded my-nav transparent">
  <div class="container">
    <a class="navbar-brand" href="#">
      <%= t 'website' %>
    </a>
  </div>
</nav>

<section class="hero-header">
  <div class="container">
    <h1 class="text-center"><%= t 'website' %></h1>
    <h2 class="text-center">Find me in app/views/welcome/index.html.erb</h2>
  </div>
</section>

my scss:

.hero-header {
  background-image: linear-gradient(138deg, #4FC3F7 0%, #27D3DD 60%, #00E3C3 100%);
  padding: 150px 0 60px 0;
  h1, h2 {
    color: white;
  }
}

@mixin nav-box-shadow($size, $blur) {
  -webkit-box-shadow: $size $size $size $size $blur;
  -moz-box-shadow: $size $size $size $size $blur;
  box-shadow: $size $size $size $size $blur;
}
@mixin nav-transition($ease) {
  -webkit-transition: all $ease ease-out;
  -moz-transition: all $ease ease-out;
  -o-transition: all $ease ease-out;
  -ms-transition: all $ease ease-out;
  transition: all $ease ease-out;
}

.my-nav {
  @include nav-box-shadow(1px, rgba(0, 0, 0, 0.2));
  @include nav-transition(0.4s);
}
.transparent {
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

and my Coffeescript:

$(window).scroll ->
  if $(document).scrollTop() > 50
    $('nav').addClass 'bg-faded'
    $('nav').removeClass 'transparent'
  else
    $('nav').addClass 'transparent'
    $('nav').removeClass 'bg-faded'
  return

any tips on how I can properly position the section element directly under the transparent navbar would be much appreciated. Alternately, if there's a better way to do this please let me know :)

Bootstrap 4's `.sticky-top` class generates the following: `position: -webkit-sticky; position: sticky; top: 0; z-index: 1020;` — DaniG2k, Jun 16 '17 at 11:47
`sticky-top` doesn't work in all browsers. Here's another approach: https://stackoverflow.com/a/39147077/171456 — Carol Skelly, Jun 16 '17 at 12:15

score 0 · Accepted Answer · answered Jun 19 '17 at 11:49

0

Solved by adding:

.my-nav {
  //  ...
  position: fixed;
  width: 100%;
}

The issue is that sticky uses js to calculate where it is on the page, so it was always appearing before the hero-header component.

answered Jun 19 '17 at 11:49

DaniG2k

4,772
36
77

Bootstrap 4 sticky navbar with subsequent section under it

1 Answers1