I'm developing a wordpress theme based on Bootstrap and I'm trying to add scrollspy's effects to my nav, but it only highlights the first element of my nav went the page is loaded (which is wrong, since its corresponding section in in the middle of the page) and then nothing else happens.
My html:
<div class="nav-collapse collapse text-center span4 scrollspy">
<ul class="nav text-center">
<li>
<a href="#section1" >Section 1</a></li>
<li>
Section 2</li>
</ul>
</div>
And the JS with which I try to activate Scrollspy:
$(document).ready(
$("body").scrollspy({
target: ".scrollspy"
})
)
My page is structured as follows:
<section id="zero" style="height: 100vh">
...
</section>
<section id="section1" style="height: 100vh">
...
</section>
<section id="section2" style="height: 100vh">
...
</section>
So I'm not really sure what your navbar looks like as you just posted the nav-collapse part but it looks fine to me. It may be that you only have 2 sections and if you have a fixed navbar and don't specify the offset your second section may not be reaching the top therefore not triggering the active event. There may be some issue with your navbar structure as well but I'm not really sure. It may be the way you are initianting the scrollspy with $(document).ready( instead of using $(document).ready(function(){ but not really sure as they both worked for me in the followig fiddle demo that I posted. Below is the working code that I used along with a working fiddle. I have added a smooth scrolling code below the scrollspy initiation script if you would like your scroll to have a smooth transition. Here is the fiddle that I used and it is working just fine Fiddle.
And here is the code with the full navbar that I used.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse scrollspy">
<ul class="nav navbar-nav">
<li class="active">Section Zero</li>
<li>Section 1</li>
<li>Section 2</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<section id="zero" style="height: 100vh;background: #222;">
...
</section>
<section id="section1" style="height: 100vh;background: #555;">
...
</section>
<section id="section2" style="height: 100vh;background: #888;">
...
</section>
And here is the ready function that I used with the top offset
$(document).ready(function(){
$('body').scrollspy({
target: ".scrollspy",
offset: 50
});
});
Hopefully this helps you figure out where things are going wrong.
Related
i have a question and that is about my navbar collapse in html. i currently use
http://pastebin.com/s92VvJr6
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><i class="fa fa-bars fa-2x" aria-hidden="true"></i></button>
<script>
$(function() {
$('.nav a').on('click', function(){
if($('.navbar-toggle').css('display') !='none'){
$(".navbar-toggle").trigger( "click" );
}
});
});
</script>
<img klass="crab" src="images/crab.png" height="50" width="50">
<a class="navbar-brand" href="">Restaurang MaxLax</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="menu-collapsed">
<div class="bar"></div>
<div class="collapse navbar-collapse">
<nav>
<ul class="nav navbar-nav">
<li>HOME</li>
<li>MENU</li>
<li>GALLERY
<li>CONTACT</li>
</ul>
</nav>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
(i don't know how to paste it in here, im new)
when the page goes to 765px width it shows the bar icon. problem is that i can't click on it to toggle down some menus. so my question leads to
Q: How do i write the script so it works will with the code.
would also be great if you can make it for me :) hehe
Mvh Max
So you are using a boostrap navbar without calling the bootstrap js file or the css file for that matter? At least I am not seeing it in your code, and the bootstrap js file should be called directly after the jquery call. Link those two files in from bootstrap and you should have no issue toggling the navbar.
Also as stated this isnt some freelance site that we will just make your code for you. This is a site for you to learn what it is you are doing. If I were you I would edit out that statement pronto or you risk a flurry of downvotes and having the question removed
I am currently working on a Bootstrap-based website, and I wanted to change the opacity of my bootstrap navbar on scroll. I wanted the navbar to become full visible at a height of 500px.
So far so good, I changed the scroll opacity using the following code I found online:
$(document).on('scroll', function (e) {
$('.navbar').css('opacity', ($(document).scrollTop() / 500));
});
My problem is that the navbar scroll opacity works on my website, but when I open my website in mobile view, the bootstrap-hamburger menu does not work.
When I press the button of the hamburger menu, the menu collapses and the hyperlinks are visible. The only problem is that I do not see a background behind those links. I tried editing this in my CSS, but setting an background there does not work, I think due to the scroll opacity script I implemented.
I am sorry for my crappy English, but I hope you understand my problem :)
Edit: Here's my navbar code:
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsemenu">
<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 topnav" href="#home"><img src="img/logo.png" class="logo"/></a>
</div>
<div class="collapse navbar-collapse" id="collapsemenu" style="padding-top:14px;">
<ul class="nav navbar-nav navbar-right">
<li>
ABOUT
</li>
<li>
WORK
</li>
<li>
TEAM
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
</nav>
I have a website and each page is using a bootstrap toggle/collapse navbar. All the page this works fine except for one. For some reason on one of the pages the navbar collapses once to the appropriate screen size, but it does not drop down. However, I noticed that if I comment out a JS file I have being sourced at the bottom of the html, like so <!--<script src="js/index.js"</script>--> then the drop down works. What's weird is that, 2 of the other pages on the same site source the same JS script, and the dropdown still works...maybe I'm just blind. The code for the nav is as follows :
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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="index.html">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
And there's honestly not a lot of JS, just one scroll function, and another "hover" function that I will probably move over to CSS eventually..
$(document).ready(function() {
$(".business-header img").on("click", function( e ) {
e.preventDefault();
$("body, html").animate({
scrollTop: $(".section-two").offset().top
}, 1500);
});
});
$(".image-wrapper img").mouseenter(function() {
$(this).css("box-shadow", " 0 0 30px #F0DEBD");
}).mouseleave(function() {
$(this).css("box-shadow", "none");
});
I should mention as well that each page has an identical nav. Is there something one of the functions that is causing this? I tried to search this topic on other posts, but was unsuccessful. Cheers
This is, most times, due to bootstrap js library being loaded more than one time
My navbar's toggle button refuses to work. The code I'm using has been copied and pasted from a Bootstrap template with a fully functional navbar. I don't know what's up.
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<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="#page-top">Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Home
</li>
<li class="page-scroll">
Downloads
</li>
<li class="page-scroll">
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Here's the script tags to the JavaScript and jQuery files. They've been left unmodified.
<!-- jQuery -->
<script src="js/jquery.js" />
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js" />
You didn't identify anything to drop down. You need a list of things, using an unordered list. All you have is the names of the buttons. Please see bootstraps example below:
http://getbootstrap.com/components/#btn-dropdowns
I am trying to use easytabs jquery with Twitter Bootstrap 3. The problem is when i try to resize it, the navbar-toggle isn't working anymore when I click it, nothing appears. Any idea why?
Here is what my html structure looks like:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for 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>
<h1><a class="navbar-brand" href="#">Bach Wigs</a></h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="tabContainer">
<ul class="nav navbar-nav navbar-right">
<li class='active'>Salon</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Hair Care</li>
<li>Hair Extensions</li>
<li>Hair Color</li>
<!-- <li class="divider"></li> -->
</ul>
</li>
<li>Location</li>
<li>Contact Us</li>
</ul>
<section class="body">
<div id="salon">
<div class='salon-title center-block'>
<img src="img/LogoPNG2.png" alt="logo" class='center-block'>
</div>
<div class='salon-description center-block'>
<h3>Bach Wigs</h3>
<p>We provide top quality in all our services color, cut, style, extensions, wigs and much more.</p>
<p> Our newly remodeled salon established, December, 2012 services the finest clientele in the Metroplex, the United States and several countries around the world.</p>
</div>
</div>
<div id="services">
<div class='salon-title center-block'>
<img src="img/LogoPNG2.png" alt="logo" class='center-block'>
</div>
<div class='salon-description center-block'>
<h3>Bach Wigs</h3>
<p>We provide top quality in all our services color, cut, style, extensions, wigs and much more.</p>
<p> Our newly remodeled salon established, December, 2012 services the finest clientele in the Metroplex, the United States and several countries around the world.</p>
</div>
</div>
</section>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
And here's the javascript code when i try to use easytabs:
$(document).ready( function() {
$('#tabContainer').easytabs({
transitionIn: 'fadeIn',
transitionOut: 'fadeOut',
animationSpeed: 'slow'
});
});
UPDATE:
I changed tabContainer back to bs-example-navbar-collapse-1 and created another div to place the tab id for easytabs jquery to function. Problem now is the body contents are also getting hidden when going responsive. I know it's because of the order, I'm finding ways how to solve this. Hopefully you can give out some ideas too. Thanks!
If you want, you can take a look at the website itself. http://webguy.moe/hair