Scrollspy does not work

Question

Scrollspy does not work

Asked 6 years ago

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

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>

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

– edson alves

2018/12/07 at 11:16
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!

– Vinnicius Gomes

2018/12/08 at 02:45
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

– hugocsl

2018/12/10 at 18:17

No answers

Browser other questions tagged javascript html css twitter-bootstrap

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