javascript - How can I stop the bootstrap 4 navbar from sticking to the top of the page when in mobile viewport? - Stack Overflo

admin管理员组

文章数量:1023120

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>

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>

• javascript
• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Nov 1, 2017 at 22:16 bogdanbogdan 66711 gold badge88 silver badges1717 bronze badges 1

• which bootstrap version are you using ? – Aaqib Commented Nov 1, 2017 at 22:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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./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! :)

• You could have used the built-in class sticky-top https://getbootstrap./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./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./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>

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>

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>

• javascript
• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Nov 1, 2017 at 22:16 bogdanbogdan 66711 gold badge88 silver badges1717 bronze badges 1

• which bootstrap version are you using ? – Aaqib Commented Nov 1, 2017 at 22:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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./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! :)

• You could have used the built-in class sticky-top https://getbootstrap./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./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./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>

本文标签：