Bootstrap Navigation Active Not Working For Links -

-

i used navigation bar bootstrap template, , template one-page layout navigation sliding down rather linking different page.

i tried changing links link different pages, when active class not work stuck on new page without knowing page on (unless read content) because navigation doesn't tell you.

the active class works when link "#services" example, scrolls down , active class works, when put such "index.php" or "index.html", active class no longer work.

anyone know how can fix this?

this navigation bar html:

<nav id="mainnav" class="navbar navbar-default navbar-fixed-top">     <div class="container-fluid">         <!-- brand , toggle grouped better mobile display -->         <div class="navbar-header">             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">                 <span class="sr-only">toggle navigation</span>                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>             </button>             <a class="navbar-brand page-scroll" href="#page-top">start bootstrap</a>         </div>          <!-- collect nav links, forms, , other content toggling -->         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">             <ul class="nav navbar-nav navbar-right">                 <li>                     <a class="page-scroll" href="#about">about</a>                 </li>                 <li>                     <a class="page-scroll" href="#services">services</a>                 </li>                 <li>                     <a class="page-scroll" href="#portfolio">portfolio</a>                 </li>                 <li>                     <a class="page-scroll" href="#contact">contact</a>                 </li>             </ul>         </div>         <!-- /.navbar-collapse -->     </div>     <!-- /.container-fluid --> </nav>

ok....so template you're using bootstraps scrollspy function determines active links page. unfortunately takes account anchors on current page , doesn't utilize same css separate pages. here's need do.

any links go external pages need have href of pages name begin with. you'll have add in same class data-target="#page-top" in order activate active class on pages li.

here's gets little more complicated. on external page you're going have change anchor links first page include index.html before each anchor name. ensure on other pages you're brought same sections when click on them.

also... on external pages you'll want change navbar-brand href index.html when click on you're brand name take homepage instead of top of existing page.

so lets name of external page test.html. index navigation li's this.

 <li><a class="page-scroll" href="#about">about</a></li>  <li><a class="page-scroll" href="#services">services</a></li>  <li><a class="page-scroll" href="#portfolio">portfolio</a</li>  <li><a class="page-scroll" href="#contact">contact</a></li>  <li><a class="page-scroll" href="test.html" data-target="#page-top">test</a></li>

your test.html navbar brand this

<a class="navbar-brand page-scroll" href="index.html">start bootstrap</a>

and test.html navigation li's this

 <li><a class="page-scroll" href="index.html#about">about</a></li>  <li><a class="page-scroll" href="index.html#services">services</a></li>  <li><a class="page-scroll" href="index.html#portfolio">portfolio</a></li>  <li><a class="page-scroll" href="index.html#contact">contact</a></li>  <li><a class="page-scroll" href="test.html" data-target="#page-top">test</a></li>

Comments

Post a Comment

Popular posts from this blog

python - TypeError: start must be a integer -

-
i trying draw 5 turtles, getting typeerror on line 25. here code: import turtle wn = turtle.screen() redrose = turtle.turtle() color = input("what background color be?") fillcolor_f = input("what color of rose be?") redrose.hideturtle() redrose.speed(30) redrose.penup() redrose.left(180) redrose.forward(175) redrose.right(90) redrose.forward(30) redrose.right(90) redrose.pendown() def drawrose(red): redrose.color("pink") redrose.fillcolor(fillcolor_f) redrose.fill(true) in range(red): redrose.forward(i) redrose.right(49) in range(5): drawrose(redrose) redrose.penup() redrose.forward(350) redrose.right(144) redrose.pendown() redrose.fill(false) drawrose(50) wn.bgcolor(color) i trying draw 5 roses, produces errors. doing in interactivepython.org. you recursively calling drawrose wrong parameter. on line 23 ( for in range(red): ) expect red integer...
Read more

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

-
i have following code almost works properly; private void cbstatus_drawitem(object sender, listboxdrawitemeventargs e) { string item = e.item string; if (item != null) { switch (item) { case "1": e.appearance.forecolor = color.green; e.appearance.backcolor = color.green; break; case "2": e.appearance.forecolor = color.orange; e.appearance.backcolor = color.orange; break; case "3": e.appearance.forecolor = color.red; e.appearance.backcolor = color.red; break; } } } when dropdown shown, items forecolor correct, backcolor remains whatever backcolor of theme is; i.e. if i've got set dark theme, backcolor dark, cells in gridview, rather being green/orange/red. i've tried setting e.appearance.options.usebackcolor trying set e....
Read more

django - Creating multiple model instances in DRF3 -

-
1) create multiple model instances 1 api call, asked here: how create multiple model instances django rest framework? tried solution named in link, no success. i trying upload multiple files in 1 api call. result: files uploaded (only once overwrote perform_create) 1 instance created (if send 2 files, latter created instance). my code: class fileuploadserializer(serializers.modelserializer): def __init__(self, *args, **kwargs): many = kwargs.pop('many', true) super(fileuploadserializer, self).__init__(many=many, *args, **kwargs) class meta: model = fileupload read_only_fields = ('created', 'datafile', 'owner') class fileuploadviewset(viewsets.modelviewset): queryset = fileupload.objects.all() serializer_class = fileuploadserializer parser_classes = (multipartparser, formparser, ) def perform_create(self, serializer): file_list = self.request.data.getlist('file') ...
Read more