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
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'm new to Angular js and I'm trying to use Angular js to embed html snippets within a html page with the help of bootstrap template.
This is my index.html
<body >
<div ng-app="">
<div ng-include="mainmenu.html"></div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- jQuery Version 1.11.1 -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</body>
This is my manimenu.html
<!-- Navigation -->
<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="#">Start Bootstrap</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>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Both index.html and mainmenu.html are in same folder. But mainmenu.html is not showing inside the index.html. If anyone knows please help me to solve this
All you're missing is quotes around the reference to your template. Without quotes, it's evaluated as an expression.
<div ng-include="'mainmenu.html'"></div>
From the documentation
angular expression evaluating to URL. If the source is a string constant, make sure you wrap it in single quotes, e.g. src="'myPartialTemplate.html'".
.try with this or checkout the link below
<div ng-include src="'mainmenu.html'"></div>
http://stackoverflow.com/questions/13943471/angularjs-ng-include
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
I'm having an issue getting the collapsible navigation bar to load on a page - the button appears when you shrink the screen, but when I click on it, nothing happens. The console isn't throwing me any errors, so I'm assuming there must be something wrong with my css/javascript, but I don't really know what.
If it matters, I'm linking through with the Bootstrap CDN on my page - I don't know if that requires me to include the plugins manually or not (I don't think it would but I'm not sure).
The following is my HTML and Javascript link-ins:
<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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Operation Pulse</li>
<li>Forum</li>
<li class="dropdown">
Media <b class="caret"></b>
<ul class="dropdown-menu">
<li>News & Updates</li>
<li>Indie Pulse</li>
<li>rec</li>
<li>Geeks and Giggles</li>
<li class="divider"></li>
<li>Podcasts</li>
</ul>
</li>
<li class="dropdown">
Info <b class="caret"></b>
<ul class="dropdown-menu">
<li>About Us</li>
<li>FAQ</li>
<li>Crew</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
</div>
JS
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" type="text/javascript"></script>
Change the data-target= in the button to.. .navbar-collapse
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
Most of the time, boostrap.js file reference two times.
In our case, it was referenced twice, one in master and others by mistake in the inner pages (Page layout in SharePoint Case).
I have two problems with Bootstrap: I can't add ScrollSpy and smooth scroll at my Boostrap site.
<body data-spy="scroll" data-target="#test">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div id="test" class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target=".navbar-ex1-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="#">L</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="test" class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="">Chi Sono</li>
<li><a class="scroll" href="#Conoscenze">Conoscenze</a></li>
<li><a href="#OS" >Sistemi operativo</a></li>
</div><!-- /.navbar-collapse -->
</nav>
This is the navbar code. I've tried many solutions, but to no avail. How do I add this effect?
replace
<div id=test ...>
with
<nav id=test...>
add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component. Since you are using div when defining id of data-target for scrollspy, it won't work. use nav instead
http://getbootstrap.com/javascript/#scrollspy
And another error in this part of your code here
</div><!-- /.navbar-collapse -->
</nav>
do the navbar-collapse with nav tag not the div tag.
so the correct code is
</nav><!-- /.navbar-collapse -->
</nav>