Reputation: 3375
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
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
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
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
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
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