bootstrap 4 navbar sticky only on mobile

Question

I have this (haml):

  %body
    .container
      %nav.navbar.sticky-top.navbar-expand-md.navbar-light.bg-light

is there a bootstrap only way to make this navbar sticky top only when on mobile (< lg)?

Answer 1

You can force the navbar to stick to the top on mobile only using a media query.

Change the max-width to your desired maximum width

@media (max-width: 1200px) {
  body {
    margin-top: 50px;
  }

  .navbar{
    position: fixed;
    right: 0;
    left: 0;   
    border-radius: 0;
    top: 0;
  }      
}

Hope this helps.