CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
S.I.
S.I.

Reputation: 3375

Links in navbar doesn't work

I have one page site created with Bootstrap. On this page header links are like this:

<header id="section_header" class="navbar-fixed-top main-nav" role="banner">
    <div class="container">
        <!-- <div class="row"> -->
             <div class="navbar-header ">
                 <button type="button" class="navbar-toggle" 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" href="#">
                        <img src="" alt="biZkvitki.bg">
                    </a>
             </div><!--Navbar header End-->
                <nav class="collapse navbar-collapse navigation" id="bs-example-navbar-collapse-1" role="navigation">
                    <ul class="nav navbar-nav navbar-right ">
                        <li class="active"> <a href="#slider_part">Home</a></li>
                        <li><a href="#portfolio"  >Portfolio</a> </li>
                        <li><a href="#about" >About</a> </li>
                        <li><a href="#team" >Team</a> </li>
                        <li><a href="#blog" >Blog</a> </li>
                        <li><a href="#contact" >Contacts</a> </li>
                    </ul>
                 </nav>
            </div><!-- /.container-fluid -->
 </header>

On that page everything work fine. What I try is to recreate this header in every internal page but when I try to make links like this they doesn't work. Nothing happen when I click on them. The idea is when user is on some internal page and click About for example to load index page section about.. What I'm missing here?

<ul class="nav navbar-nav navbar-right ">
    <li class="active"> <a href="../index.php#slider_part">Home</a></li>
    <li><a href="../index.php#portfolio"  >Portfolio</a> </li>
    <li><a href="../index.php#about" >About</a> </li>
    <li><a href="../index.php#team" >Team</a> </li>
    <li><a href="../index.php#blog" >Blog</a> </li>
    <li><a href="../index.php#contact" >Contacts</a> </li>
</ul>

UPDATE: I believe this is the .js which is for the navbar

jQuery(function($) {
"use strict";

 $('.navigation').singlePageNav({
    currentClass: 'active',
    changeHash: true,
    scrollSpeed: 750,
    offset: 0,
    filter: ':not(.external)',
    easing: 'swing',

});

$.noConflict();
 $('.nav a').on('click', function(){ 
    if($('.navbar-toggle').css('display') !='none'){
        $(".navbar-toggle").trigger( "click" );
    }
});




// accordian
$('.accordion-toggle').on('click', function(){
  $(this).closest('.panel-group').children().each(function(){
  $(this).find('>.panel-heading').removeClass('active');
 });

$(this).closest('.panel-heading').toggleClass('active');
});

Upvotes: 1

Views: 6309

Answers (5)

Sann webcoder
Sann webcoder

Reputation: 1

This is something i often come across when working with bootstrap. You are probably using the ScrollTo.js because you most likely just copy/pasted the whole page onto a new one. So (if you don't really need it) just delete the from your head section, or at the bottom before the closing body tag.

Upvotes: 0

Jelgab
Jelgab

Reputation: 1910

The links on the page that works are local and that's why they work fine:

<ul class="nav navbar-nav navbar-right ">
  ...
  <li><a href="#portfolio">Portfolio</a> </li>
  <li><a href="#about"    >About</a>     </li>

The links on the other pages are not local (not local bookmarks) according to single page navigation since they start with a relative path:

<li><a href="../index.php#portfolio">Portfolio</a> </li>
<li><a href="../index.php#about"    >About</a>     </li>

Notice that there is a filter when you call "singlePageNav":

 $('.navigation').singlePageNav({
    currentClass: 'active',
    changeHash  : true,
    scrollSpeed : 750,
    offset      : 0,
    filter      : ':not(.external)',
    easing      : 'swing',

});

If you add that filter class to your anchors, they should work fine:

<li><a class="external" href="../index.php#portfolio">Portfolio</a> </li>
<li><a class="external" href="../index.php#about"    >About</a>     </li>

Upvotes: 1

James George Dunn
James George Dunn

Reputation: 523

You're using anchor links so you'll just move up and down the same page.

Make sure that you have your id's setup properly.

<div id="portfolio">Portfolio</div>

Upvotes: 1

Pik_at
Pik_at

Reputation: 1457

Oh yeah, i knew that js script make the trouble! A solution should be to call you script only on your index.php because on another page the script prevent normal links behavior. If you dont want to remove your script on another page, you need to detect your index page like:

<body id="home-page">

And on your script:

 $('#home-page .navigation')

Upvotes: 2

Jake Taylor
Jake Taylor

Reputation: 4336

If you're on a local computer you need to add the name of your site folder as well that holds all of your site files. For example ../"name of site"/index.php#portfolio If your site is live, add the entire site address before index for example http://"name of site"/index.php#portfolio

Upvotes: 1

Related Questions