How I can make sticky navbar using bootstrap?

Question

hello I'm doing a website and I wish that when I go down the navbar it would be still at the top of the page. I tried my strength with jquery and vanilla javascript but unfortunately I couldn't do anything. (sorry for bad English)

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="public/css/main.css">
  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
        </button>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-center">
          <li class="active"><a href="#home">STRONA GŁÓWNA</a></li>
          <li><a href="#shop">SKLEP</a></li>
          <li><a href="#contact">KONTAKT</a></li>
          <li><a href="#portfolio">PORTFOLIO</a></li>
        </ul>
      </div>
    </div>
  </nav>

CSS

.navbar-nav.navbar-center {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  font-size: 15px;
  font-family: 'Poppins';
}
navbar-toggle {
  margin-top: 23px;
  padding: 9px 10px !important;
}
@media (min-width: 768px) {
  .navbar-nav>li>a {
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
    list-style: none;
  }
}
@media screen and (max-width: 767px) {
  .navbar-nav.navbar-center {
    position: static;
    color: #fff;
    transform: none;
    font-size: 1em;
  }
}

Thanks in advance for your help.

yes, because this is how the website is designed more or less — jedziemy, Jul 23 '21 at 17:46
Check this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky I hope it fixes your problem — DineshMsd, Jul 23 '21 at 17:47
it work but navbar background is tranparent screenshot; https://imgur.com/a/HeLGgVF — jedziemy, Jul 23 '21 at 17:57

score 1 · Answer 1 · edited Jul 23 '21 at 17:52

1

Add the "sticky-top" class to your nav class:

<nav class="navbar sticky-top navbar-inverse">

edited Jul 23 '21 at 17:52

OMi Shah

5,768
3
25
34

answered Jul 23 '21 at 17:48

EKrol

151
9

it didn't do anything, it still works the same :/ – jedziemy Jul 23 '21 at 17:52
I noticed you are using bootstrap 3.3.7, is there any particular reason for this? If not use Bootstrap 5 and sticky-top will work. If you need to user 3.3.7 see this: https://stackoverflow.com/questions/41752925/bootstrap-3-how-do-i-make-the-nav-bar-sticky-on-scroll – EKrol Jul 23 '21 at 17:54
position="fixed" – Amit Rai Jul 23 '21 at 17:54
It works, thank you everyone for the trouble. – jedziemy Jul 23 '21 at 18:04
Good to hear, what did you do in the end, switch to bootstrap 5? – EKrol Jul 23 '21 at 18:06

score 0 · Answer 2 · answered Jul 23 '21 at 17:58

0

Add the fixed-top to your nav class :)

answered Jul 23 '21 at 17:58

Sektowr

356
1
8

How I can make sticky navbar using bootstrap?

2 Answers2