html - Bootstrap data-spy not firing off -


i'm working on profile website myself , have 'decent' concept , running.

however seems if navbar's data-spy either isn't firing off or if there wrong html / css.

this pen html / css. body (relevant data-spy reference):

<body data-spy="scroll" data-target="#navbar" data-offset="50"> 

this how i've set navbar:

<nav id="navbar" class="collapse navbar-collapse">   <div class="navbar-header">      <button type="button" data-toggle="collapse" data-target="#navbar-target" class="navbar-toggle">      <span class="icon-bar"> </span>     <span class="icon-bar"> </span>     <span class="icon-bar"> </span>     </button>   </div>   <div class="collapse navbar-collapse" id="navbar-target">     <ul class="nav navbar-nav navbar-right">       <li>         <a href="#top" > </a>       </li>       <li>         <a href="#portfolio" > portfolio </a>       </li>       <li class>         <a href="#contact" > contact </a>       </li>     </ul>   </div> </nav>  

and here of relevant css:

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {   color: #333;   background-color: black; }  .navbar-nav>li>a {   color: #000000 !important; }  #navbar {   margin: 12px 0; }  .navbar-default .navbar-toggle {   border-color: #ddd; }   .navbar-toggle {   position: relative;   float: right;   padding: 9vw 10vw   margin-top: 8vw;   margin-right: 15vw;   margin-bottom: 8vw;   background-color: transparent;   background-image: none;   border: 1vw solid transparent;   border-radius: 4vw; }  .navbar-default .navbar-collapse {   border-color: #e7e7e7; }  .nav>li {   height: 100%;   text-transform: uppercase;   font-weight: bold;   letter-spacing: 2px;   display: -webkit-inline-box;   display: -webkit-inline-flex;   display: -ms-inline-flexbox;   display: inline-flex; }  .nav>li>a:focus, .nav>li>a:hover {   text-decoration: none;   color: #722872;   background-color: #ffffff; }  .nav>li a:hover {   color: #722872;   background: #ffffff;   box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1); } 

as mentioned, full working example on code-pen

seems bootstrap doesn't include default style active nav element. need create style .navbar-nav>.active>a


Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -