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
Post a Comment