I am using Bootstrap Version 3.3.5 from getbootstrap.com. I copied the navbar code from their website (https://getbootstrap.com/components/#navbar). I adjusted this code so that it looks how I want it to look. This is how it looks right now:
<?php
/**
* Created by PhpStorm.
* User: Olivier
* Date: 2/10/2016
* Time: 10:41 AM
*/
?>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="dropdown" 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>
</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>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
I include JQuery and the bootstrap stylesheet in this piece of code:
<?php
/**
* Created by PhpStorm.
* User: Olivier
* Date: 2/10/2016
* Time: 10:30 AM
*/
?>
<html>
<head>
<title>EquiRent</title>
<!-- Latest compiled and minified JavaScript -->
<!-- <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>-->
<!--
**Including bootstrap
-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
The navbar looks just fine and everything works but as soon as I make the page small enough so that the hamburger menu will automatically show and I click it, nothing happens.
I want the navbar to work just like it works on https://getbootstrap.com/components/#navbar . So that when I make the window smaller, the hamburger menu atually does something when you click it.
Hi the following code should be.
data-toggle="collapse" instead of data-toggle="dropdown"
Related
I am trying to trigger some JavaScript to execute whenever the Bootstrap navbar is either expanded or collapsed.
I have been stuck on this problem for a few days now, and none of the solutions I have found online appear to work in a reliable way.
<!-- Font awesome -->
<link href="https://markups.io/demo/osteriax/assets/css/font-awesome.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://markups.io/demo/osteriax/assets/css/bootstrap.css" rel="stylesheet">
<!-- Slick slider -->
<link rel="stylesheet" type="text/css" href="https://markups.io/demo/osteriax/assets/css/slick.css">
<!-- Date Picker -->
<link rel="stylesheet" type="text/css" href="https://markups.io/demo/osteriax/assets/css/bootstrap-datepicker.css">
<!-- Gallery Lightbox -->
<link href="https://markups.io/demo/osteriax/assets/css/magnific-popup.css" rel="stylesheet">
<!-- Theme color -->
<link id="switcher" href="https://markups.io/demo/osteriax/assets/css/theme-color/default-theme.css" rel="stylesheet">
<!-- Main style sheet -->
<link href="https://markups.io/demo/osteriax/style.css" rel="stylesheet">
<!-- Start header section -->
<header id="mu-header">
<nav class="navbar navbar-default mu-main-navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button id="navDrop" 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>
<!-- LOGO -->
<!-- Text based logo -->
<a class="navbar-brand" href="index.html">Osteria<span>X</span></a>
<!-- Image based logo -->
<!-- <a class="navbar-brand" href="index.html"><img src="assets/img/logo.png" alt="Logo img"></a> -->
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right mu-main-nav">
<li>HOME</li>
<li>ABOUT US</li>
<li>MENU</li>
<li>RESERVATION</li>
<li>GALLERY</li>
<li>OUR CHEFS</li>
<li>CONTACT</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</header>
<!-- End header section -->
<!-- jQuery library -->
<script src="https://markups.io/demo/osteriax/assets/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://markups.io/demo/osteriax/assets/js/bootstrap.js"></script>
<!-- Slick slider -->
<script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/slick.js"></script>
<!-- Counter -->
<script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/simple-animated-counter.js"></script>
<!-- Gallery Lightbox -->
<script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/jquery.magnific-popup.min.js"></script>
<!-- Date Picker -->
<script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/bootstrap-datepicker.js"></script>
<!-- Ajax contact form -->
<script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/app.js"></script>
<!-- Custom js -->
<script src="https://markups.io/demo/osteriax/assets/js/custom.js"></script>
And then the JavaScript:
<script>
/* JS: */
$(document).ready(function(){
$("#navDrop").on("hide.bs.dropdown", function(){
alert(3);
});
$("#navDrop").on("show.bs.dropdown", function(){
alert(4);
});
});
</script>
The above code does not appear to be working.. Thank you in advance for any advice, it is greatly appreciated :)
You're looking for the collapse event, not dropdown. Also, make sure you target the navbar, not the toggle button.
<script>
$(document).ready(function(){
$(".navbar").on("hide.bs.collapse", function(){
alert(3);
});
$(".navbar").on("show.bs.collapse", function(){
alert(4);
});
});
</script>
I am using server side includes for my navigation bar on my website. The bootstrap navigation bar works just fine in its own file: the dropdown opens and closes on mobile, but once I include it on the page I want it on ( ), the dropdown only will dropdown and won't go back up.
I'm not sure what I am doing wrong, or if anyone can figure out what is going wrong.
Here is the code to just the navigation bar that works correctly by itself.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="../_css/main.css" rel="stylesheet" type="text/css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/index.asp">O<span>NE</span> HEALTH <small>Nebraska One Health Resource Portal</small></a>
<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>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li>Health Resources</li>
<li class="active">Around the Globe</li>
<form class="navbar-form navbar-right search" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Then I here is where I try and include the file, where the dropdowns no longer work....
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="../_css/main.css" rel="stylesheet" type="text/css">
<!-- NAVIGATION -->
<!--#include virtual="/navigation/navigation.asp" -->
<div class="index-main">
<div class="container">
<div class="col-md-10 col-md-offset-1">
<h1 style="text-align: center">One Health</h1>
<h4 style="text-align: center; line-height: 35px; font-weight: 300">One Health is a comprehensive approach to public health which recognizes that the health of the environment, animals (wild and domestic), and humans are interconnected. To have long-term success against diseases, we have to address all three areas because diseases in one group frequently spill over and affect the others. The Nebraska One Health Program is a grant-funded program to network, research, and educate producers, pest control operators, educators, public health officals, and other interested parties about addressing diseases in nature that affect humans and their animals.</h4>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
download the files and include them to your html page locally and check once.
I use Node.js & express and for the view I use Jade template ,
What I want is that the Test text will be on the bottom under the black navigation bar and currently I was not able to do so(it's hiding under the black navbar how can I move it to the bottom ),what I miss here ?
I put the div
This is the code for jade -Layout.jade
html
head
title= title
link(rel="stylesheet", href="bootstrap.min.css")
link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css')
script(src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js')
body
nav.navbar.navbar-inverse.navbar-fixed-top(role='navigation')
.container
.navbar-header
button.navbar-toggle(data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
spansronly
span.icon-bar
span.icon-bar
span.icon-bar
#bs-example-navbar-collapse-1.collapse.navbar-collapse
ul.nav.navbar-nav
li
a(href='/recipes/bbq') Tab1
li
a(href='/recipes/bbq') Tab2
div.container
block content
This is the content
extends layout
extends layout
block content
.jumbtroon
h1= 'Test'
I put the div.container in the same indetation of the first div
this is the rendered HTML
<html>
<head>
<title>
Arrivals
</title>
<link href="bootstrap.min.css" rel="stylesheet"></link>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse">
<spansronly></spansronly>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="/recipes/bbq">
Tab1
</a>
</li>
<li>
<a href="/recipes/bbq">
Tab2
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="jumbtroon">
<h1>
test
</h1>
</div>
</div>
</body>
</html>
Here in the img you can see that the test is under the navbar
As the navbar floats on top of the page, the rest of the page's content starts under it . Bootstraps documentation has a solution for this, see http://getbootstrap.com/components/#navbar-fixed-top.
Add some padding to the top of the page by adding:
body {
padding-top: 70px;
}
to your custom.css file
My page, containing a bootstrap navbaar, shows a togglebutton for the menulinks when viewed in smal window. Hiiting this buttons shows the dropdown containing the menuitems but after pressing the togglebutton again it won't close...
Anyone know why?
<html>
<head>
<title>Loket BWL Rapportage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="bwl.css" type="text/css"/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div 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>
<img class="imgLogo" src="Images/arnhemlogo.png" alt="arnhem" />
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>
testlink 1
</li>
<li>
testlink 2
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
<div class="container">
<table class="table table-bordered">
<tr>
<td class = "header">Onderwerp</td>
<td class = "header">Gegevens</td>
</tr>
<xsl:apply-templates/>
</table>
<!--<br/>
<div style="font-size:12px"><b>Meta-informatie</b></div>-->
</div>
</body>
<script language="JavaScript" src="https://code.jquery.com/jquery.js" />
<script language="JavaScript" src="../Scripts/bootstrap.js" />
</html>
Changing the .js references to:
<script src="https://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js" />
did the trick.
I am probably missing something quite small and it's frustrating me as I have been sitting here for a few hours now trying to work this out. The Navbar will not link with the Javascript. The button appears when the window is resized correctly however will not collapse the menu when clicked.
Quick look at my Links in my Header (Just in case they are in the wrong order)
<link rel="stylesheet" href="/assets/css/bootstrap.css">
<link rel="stylesheet" href="/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="/assets/css/style.css?v=2">
<script src="/assets/js/bootstrap.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<!-BootStrap--><script src="/assets/js/jquery-1.7.1.min.js"></script>
<script src="/assets/js/jquery.validate.min.js"></script>
<script src="/assets/js/script.js"></script>
<script src="/assets/js/bootstrap-fileupload.js"></script>
Quick look at my HTML -
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!--<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">-->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="span4">
<a href="{site_url}" title="People Team">
<img src="/assets/img/logo.png" alt="People Team Logo" />
</a>
</div>
<nav>
<div class="nav-collapse">
<ul class="nav">
<li{if segment_1 == ""} class="active"{/if}>
Home
</li>
<li{if segment_1 == "services"} {/if}>
Services
</li>
<li{if segment_1 == "about"} {/if}>
About the team
</li>
<li{if segment_1 == "contact"} {/if}>
Contact Us
</li>
</ul>
</div>
I assumed the Javascript is within the Bootstrap.min.js or Bootstrap.js files which are required for the navbar to work. I am just about stumped. Any help would be appreciated.
Cheers,
Change the order that your JS loads in. jQuery first, bootstrap plugins second.
<script src="/assets/js/jquery-1.7.1.min.js"></script>
<script src="/assets/js/bootstrap.js"></script> -- remove, as it is not really needed when including the minified version
<script src="/assets/js/bootstrap.min.js"></script>