Scrollspy does not work

Asked

Viewed 54 times

1

Scrollspy is not working, I would like you to change the class of each navbar item when the user goes through a specific Service, I did all the recommended imports in the documentation and it still doesn’t work

Additional information: Bootstrap v4.1.2, jQuery v3.3.1





Print


CSS: (Bootstrap v4.1.2) 

.header_area.navbar_fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  -webkit-box-shadow: 0px 4px 6px 0px rgba(12, 0, 46, 0.06);
  box-shadow: 0px 4px 6px 0px rgba(12, 0, 46, 0.06);
}

.header_area.navbar_fixed .menu_one {
  padding: 0px;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.header_area.navbar_fixed .menu_one .btn_get {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.header_area.navbar_fixed .sticky_logo img {
  display: none;
}

.header_area.navbar_fixed .sticky_logo img+img {
  display: block;
}

.header_area.navbar_fixed .w_menu .nav-item .nav-link {
  color: #051441;
}

.header_area.navbar_fixed .w_menu .nav-item .nav-link:before {
  background: #051441;
}

.header_area.navbar_fixed .menu_two .menu_toggle .hamburger-cross span,
.header_area.navbar_fixed .menu_two .menu_toggle .hamburger span {
  background: #051441;
}

.header_area.navbar_fixed .menu_two .nav_right_btn .login_btn.active,
.header_area.navbar_fixed .menu_two .nav_right_btn .login_btn:hover {
  border-color: #00aff0;
  color: #00aff0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.header_area.navbar_fixed .menu_two .nav_right_btn .login_btn.active:hover {
  background: #00aff0;
  color: #fff;
}

.header_area.navbar_fixed .menu_four .btn_get {
  border: 2px solid #ccc5fa;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.header_area.navbar_fixed .menu_four .btn_get:hover {
  border-color: #6754e2;
}

.header_area.navbar_fixed .menu_four .menu_toggle .hamburger span,
.header_area.navbar_fixed .menu_four .menu_toggle .hamburger-cross span {
  background: #6754e2;
}

.header_area.navbar_fixed .nav_right_btn .login_btn {
  color: #051441;
}

.header_area.navbar_fixed .menu_five .btn_get {
  border-color: #3d64f4;
  color: #3d64f4;
}

.header_area.navbar_fixed .menu_five .btn_get:hover {
  background: #3d64f4;
  color: #fff;
}

.header_area.navbar_fixed .menu_five .menu_toggle .hamburger-cross span,
.header_area.navbar_fixed .menu_five .menu_toggle .hamburger span {
  background: #3d64f4;
}

.header_area.navbar_fixed .menu_six .menu>.nav-item>.nav-link {
  color: #051441;
}

.header_area.navbar_fixed .menu_six .menu>.nav-item:hover>.nav-link,
.header_area.navbar_fixed .menu_six .menu>.nav-item.active>.nav-link {
  color: #3d57f4;
}

.header_area.navbar_fixed .menu_six .menu>.nav-item:hover>.nav-link:before,
.header_area.navbar_fixed .menu_six .menu>.nav-item.active>.nav-link:before {
  background: #3d57f4;
}

.header_area.navbar_fixed .menu_six .menu_toggle .hamburger-cross span,
.header_area.navbar_fixed .menu_six .menu_toggle .hamburger span {
  background: #3d57f4;
}

.header_area.navbar_fixed .menu_six .btn_get {
  border-color: #3d57f4;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #3d57f4;
}

.header_area.navbar_fixed .menu_six .btn_get:hover {
  color: #fff;
}

.header_area.navbar_fixed .menu_seven .menu>.nav-item>.nav-link {
  color: #051441;
}

.header_area.navbar_fixed .menu_seven .menu>.nav-item:hover>.nav-link,
.header_area.navbar_fixed .menu_seven .menu>.nav-item.active>.nav-link {
  color: #4069eb;
}

.header_area.navbar_fixed .menu_seven .menu>.nav-item:hover>.nav-link:before,
.header_area.navbar_fixed .menu_seven .menu>.nav-item.active>.nav-link:before {
  background: #4069eb;
}

.header_area.navbar_fixed .menu_seven .btn_get {
  border-color: #4069eb;
  color: #4069eb;
}

.header_area.navbar_fixed .menu_seven .btn_get:hover {
  background: #4069eb;
  color: #fff;
}

.header_area.navbar_fixed .menu_seven .menu_toggle .hamburger-cross span,
.header_area.navbar_fixed .menu_seven .menu_toggle .hamburger span {
  background: #4069eb;
}

.header_area.navbar_fixed .menu_eight .saas_btn {
  border-color: #23b1fe;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.header_area.navbar_fixed .menu_eight .saas_btn:hover {
  background: #23b1fe;
  color: #fff;
}

.header_area.navbar_fixed .menu_eight .menu_toggle .hamburger span,
.header_area.navbar_fixed .menu_eight .menu_toggle .hamburger-cross span {
  background: #23b1fe;
}

.header_area.navbar_fixed.header_area_five .menu_one {
  padding: 0px 50px;
}


HTML code: 

<body data-spy="scroll" data-target=".navbar" style="body {position: relative;}">
  <header class="header_area">
      <nav class="navbar navbar-expand-lg menu_one menu_four">
          <div class="container custom_container p0">
              <a class="navbar-brand" href="#"><img src="src/assets/img/logo.png" alt="logo"></a>
              <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                  aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="menu_toggle">
                      <span class="hamburger">
                          <span></span>
                          <span></span>
                          <span></span>
                      </span>
                      <span class="hamburger-cross">
                          <span></span>
                          <span></span>
                      </span>
                  </span>
              </button>

              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav menu pl_120" align="right">
                      <li class="nav-item dropdown submenu active">
                          <a class="nav-link dropdown-toggle" href="#" role="button" aria-haspopup="true"
                              aria-expanded="false">
                              Home
                          </a>
                      </li>
                      <li class="nav-item dropdown submenu mega_menu">
                          <a class="nav-link dropdown-toggle" href="#sobre" role="button" aria-haspopup="true"
                              aria-expanded="false">
                              Sobre
                          </a>
                      </li>
                      <li class="nav-item dropdown submenu">
                          <a class="nav-link dropdown-toggle" href="#servicos" role="button" aria-haspopup="true"
                              aria-expanded="false">
                              Serviços
                          </a>
                      </li>
                      <li class="nav-item dropdown submenu">
                          <a class="nav-link dropdown-toggle" href="#portfolio" role="button" aria-haspopup="true"
                              aria-expanded="false">
                              Projetos
                          </a>
                      </li>
                      <li class="nav-item dropdown submenu">
                          <a class="nav-link dropdown-toggle" href="#contato" role="button" aria-haspopup="true"
                              aria-expanded="false">
                              Contato
                          </a>
                      </li>
                  </ul>
              </div>
          </div>
      </nav>
  </header>
javascript html css twitter-bootstrap

  • JS? Is there an error in the console? Your question is unclear

  • no error in the @edsonalves console, the question is unclear why I have no idea what is happening and what is causing this failure. The action of changing the Nav-link style after the view scrolling is not working!

  • 1

    Maybe this link will help you stop the problem, but I tell you that this component is kind of boring, you have to follow exactly what the documentation says, any element that you put there can break the rule of CSS and JS

No answers

Browser other questions tagged javascript html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.