在移动视口中时，如何阻止bootstrap 4导航栏粘在页面顶部？

Question

I want the navbar to be sticky on wide screen, and this works. I don't want it to collapse when on a mobile viewport. How can I make it so that the navbar simply unsticks from the top when on a small screen? Here is my HTML:

<div  class="navbar-light" style="position: sticky; top: 0px; background-color: #fff0d8;">  
<div class="container">
<ul class="sc-nav nav navbar-nav nav-fill w-100 flex-md-row">
<li class="nav-item">
    <a class="nav-link" href="#">aaa</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">bbbb</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">ccc</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">ddd</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">eee</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">ffffffffff</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">sdasdasdasd</a>
</li>
</ul>

Answer 1

Just use a media query to change the position to relative . Note that you'll need !important to override your inline style declaration, as inline styles have the maximum level of specificity .

@media screen and (max-width: 768px) { /* Bootstrap's mobile view breakpoint */
  .navbar-light {
    position: relative !important;
  }
}

This can be seen in the following example:

 @media screen and (max-width: 480px) { .navbar-light { position: relative !important; } } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <div class="navbar-light" style="position: sticky; top: 0px; background-color: #fff0d8;"> <div class="container"> <ul class="sc-nav nav navbar-nav nav-fill w-100 flex-md-row"> <li class="nav-item"> <a class="nav-link" href="#">aaa</a> </li> <li class="nav-item"> <a class="nav-link" href="#">bbbb</a> </li> <li class="nav-item"> <a class="nav-link" href="#">ccc</a> </li> <li class="nav-item"> <a class="nav-link" href="#">ddd</a> </li> <li class="nav-item"> <a class="nav-link" href="#">eee</a> </li> <li class="nav-item"> <a class="nav-link" href="#">ffffffffff</a> </li> <li class="nav-item"> <a class="nav-link" href="#">sdasdasdasd</a> </li> </ul> 

Hope this helps! :)

Answer 2

• You could have used the built-in class sticky-top https://getbootstrap.com/docs/4.0/utilities/position/

Sticky top

Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The .sticky-top utility uses CSS's position: sticky , which isn't fully supported in all browsers.

Microsoft Edge and IE11 will render position: sticky as position: relative . As such, we wrap the styles in a @supports query, limiting the stickiness to only browsers that properly can render it.

<div class="sticky-top">...</div>

• and create a custom break point at @media screen and (max-width: 767px) to match flex-md-row break point.

https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

// Extra small devices (portrait phones, less than 576px)

// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)

@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)

@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) { ... }

 @media screen and (max-width: 767px) { .sticky-top { position: relative !important; } } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" > <div class="navbar-light" style="background-color: #fff0d8;"> <div class="container"> <ul class="sc-nav nav navbar-nav nav-fill w-100 flex-md-row sticky-top"> <li class="nav-item"> <a class="nav-link" href="#">aaa</a> </li> <li class="nav-item"> <a class="nav-link" href="#">bbbb</a> </li> <li class="nav-item"> <a class="nav-link" href="#">ccc</a> </li> <li class="nav-item"> <a class="nav-link" href="#">ddd</a> </li> <li class="nav-item"> <a class="nav-link" href="#">eee</a> </li> <li class="nav-item"> <a class="nav-link" href="#">ffffffffff</a> </li> <li class="nav-item"> <a class="nav-link" href="#">sdasdasdasd</a> </li> </ul> <div style="height:200vh">give a scroll to the demo</div>