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=".3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="public/css/main.css">
  <link rel="stylesheet" href=".css">
  <script src=".5.1/jquery.min.js"></script>
  <script src=".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.

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./bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="public/css/main.css">
  <link rel="stylesheet" href="https://use.typekit/psn0aff.css">
  <script src="https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn./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.

• javascript
• html
• css
• web
• bootstrap-4

• You need a sticky navbar on top only Right? – DineshMsd Commented Jul 23, 2021 at 17:43
• yes, because this is how the website is designed more or less – jedziemy Commented Jul 23, 2021 at 17:46
• Check this w3schools./howto/tryit.asp?filename=tryhow_js_navbar_sticky I hope it fixes your problem – DineshMsd Commented Jul 23, 2021 at 17:47
• try to use position="fixed" – Amit Rai Commented Jul 23, 2021 at 17:54
• it work but navbar background is tranparent screenshot; imgur./a/HeLGgVF – jedziemy Commented Jul 23, 2021 at 17:57

2 Answers 2

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

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

Add the fixed-top to your nav class :)