I'm new to Bootstrap and just trying to get the collapsed dropdown nav bar to behave. It resizes perfectly, all the way up to the point that the window is so small that it triggers all the nav bar items being removed and placed inside the little data-toggle button. Because when I click that lil' data-toggle button, it does not expand and show the items in a drop down list like its supposed to.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header logo">
<a class="navbar-brand" href="index.html"><img src="images/nastilogowhite.png" class="img-responsive" style="margin: 0 auto;"></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<!-- Individual Navbar elements -->
<ul class="nav nav-justified nasti-nav">
<li class="active">Home</li>
<li class="divider"></li>
<li>Family Law</li>
<li class="divider"></li>
<li>Criminal Law</li>
<li class="divider"></li>
<li>Conveyancing</li>
<li class="divider"></li>
<li>About</li>
<li class="divider"></li>
<li>Contact</li>
</ul>
</div>
</div> <!-- Container fluid-->
</nav>
I've used this identical code on all pages, however for some reason it only works on the home page of this site. The only difference between the home page and other pages is that beneath the <nav> tags there is another div of content containing the main text for that page & an image. That said, when I delete the entire code for this div from my page, the problem persists so I don't think its that....
I may also be (over)using redundant classes, but thats a story for later...
Most of the time, its because jQuery isn't linked to the page correctly. Or bootstrap.js is referenced before jQuery.js. Make sure you have those linked correctly.
I used the same code and it is working perfectly, check at http://jsbin.com/henume/2/edit?html,output
You mentioned that it resizes properly, so i assume that the bootstrap.css is working. Please make sure the jQuery.js and boostrap.js are included in the page.
With >5 you have to use "data-bs-target" instead of "data-target" for the button.
This:
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
Instead of:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
As nasirkhan mentioned, the code is working perfectly on live domain. At times this issue can be caused by just the local domain name as was in my case and the same code was renderering fine on live site.
I had the same problem, confirm that you are including these two files.
First one is for Bootstrap(css) and second one is for Bootstrap(javascript).
In my case included the css one correctly but you know what I did at the time of including second one I included is as a stylesheet but it's a script.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Addition of these three lines helped me.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I was using bootstrap#5.0.2 instead of 4.6.0, as in my tutorial.
Guess things have changed in the new version.
I am using Bootstrap 5.1 and had the same issue. It only happens if you do not have the reference to the bootstrap.js file before the end of the body tag.
Changing data-toggle to data-bs-toggle and data-target to data-bs-target fixed it for me. CSS caching is a mystery sometimes leaving me to wonder when I made the breaking change. Hope this helps.
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 altering a Bootstrap-based template. The original site was a single-page with the top nav links simply scrolling to the correct section of the page. I've added some a couple of other pages, and I want the navbar links to return the users to the appropriate section of the home page.
However, when I've edited the links on the other page (not the main page) refer back to the home page, the links aren't working.
I'm sure there is something in the js files that is breaking the default mode and keeping it on the home page.
The problem is that I don't know what to edit to stop this.
The homepage is http://jimbrink.org. The scrolling links work there.
The page where the links don't work is: http://jimbrink.org/articles
Here's the html for the bar:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<div class="container">
<div class="navbar-header">
<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="#intro">JimBrink.org</a>
</div>
<div class="navbar-collapse collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Intro
</li>
<li>About
</li>
<li>Resources
</li>
<li>Impact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!-- /#navbar -->
<!-- *** NAVBAR END *** -->
Sorry for the newbie question.
UPDATE
Fixed it. The #navigation tag was just for the js function that interrupted the default action when clicked. I just removed that ID and it worked.
When you are clicking in "About" in menu, it has as href value "http://jimbrink.org/#about" and based in JS it has to move in section with id "about". In your HTML page you don't have any section with ID "#about". You need to add to about section id about. You need to match the sections IDs with the values of menu items href value, because when you are clicking it shows a JS error and cannot scroll to the section.
Uncaught TypeError: Cannot read property 'slice' of undefined
The issue I am having is getting both Scrollspy and a mobile menu to collapse when a link is clicked together. I can get the functionality of either one working by itself, but not together.
This snippet has scrollspy working, however, the mobile menu does not collapse when a linked is clicked.
<body data-spy="scroll" data-target="#mainNavbar">
<nav id="mainNavbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="#">Site Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="navbarCollapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Social</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
</div>
</nav>
</body>
If I add the following to each anchor tag the mobile menu will collapse on click, but scrollspy breaks:
data-toggle="collapse" data-target=".navbar-collapse.in"
I'm assuming that using data-target is causing the issue, but I'm not sure how else to get around it.
Does anybody know of a way to get these two things to work together?
In searching other answers I was able to get both features to work by themselves, but I've yet been able to find something to assist in getting them working together. If I missed an answer, please point me in the right direction.
Thanks,
After further searching, it seems like using the data-toggle and data-target in the anchor tags breaks scrollspy. I've decided to use the following JS I found on another StackOverflow question for collapsing the mobile nav menu. This doesn't work with sub-menus it seems, but I'm not worried about that.
<script>
$('.navbar-collapse a').click(function (e) {
$('.navbar-collapse').collapse('toggle');
});
</script>
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
None of the bootstrap javascript events (in this case, the ones for collapse / expand) will bind to my elements. I'm new to bootstrap, so probably there's an issue somewhere????
When pasted into bootply it works fine http://www.bootply.com/tMvXXUvlz6
limited edition live example of the broken version also available here http://quirell.ngrok.io/tagged/life#
head.html:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="/static/css/main.css" rel="stylesheet">
body.html:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar" class="navbar-toggle collapsed"><span class="sr-only">Toggle Navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>Lynn Cyrin
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About Me</li>
<li>Contact</li>
<li class="dropdown">Dropdown<span class="caret"></span>
<ul role="menu" class="dropdown-menu">
<li>Life</li>
<li>Advocacy</li>
<li>Tech</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
footer.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
EDITS:
There's nothing on the console that shows any error message. I just noticed that there's a line at the top of bootstrap that throws an error is jQuery isn't present, and I can't get that line to trigger (by removing jQuery).
I had a feeling that all js was broken, so I did console.log('pizza') right below the call to bootstrap.js, and that worked fine. It's as if my page is never applying the contents of bootstrap.js ??????
You should have src on both <script> tags. You have href on the Bootstrap one.
Also, should probably ditch the https and just use //<url here> so that it works with whatever protocol you're requesting the site with.
Add your Jquery link below the bootstrap. because in your case browser first load jQuery and then try to load bootstrap, which create conflict