I'm trying out this new way of programming (It's new to me) which is Blade templating in combination with Laravel 5, now I've got it working without #extends('layouts.master') and #section('content') but when I try to add them, it doesn't work.
My master.blade.php file located in views/layouts:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
<div class="content">
#yield('content')
</div>
My index.blade.php located in views:
#extends('layouts.master');
#section('content');
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<h1 class="main-title"><span>Hello</i></span></h1>
<h1 class="arrow-down"><a data-scroll href="#about"><img src="http://cdn.onnoschwanen.com/images/ui/arrow-down.svg"/></a></h1>
</div>
What am I doing wrong here?
You have an error in your index.blade.php on line 1 and 2.
The semicolon ; isn't allowed in blade templating
Do this:
#extends('layouts.master')
#section('content')
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<h1 class="main-title"><span>Hello</i></span></h1>
<h1 class="arrow-down"><a data-scroll href="#about"><img src="http://cdn.onnoschwanen.com/images/ui/arrow-down.svg"/></a></h1>
</div>
And it should work just fine.
Hope this helps!
You should use #yield command in the master.blade.php not in the index.blade.php.
Try this in your master.blade.php after the end of nav tag:
<content>
#yield('content')
</content>
And remove from index.blade.php the ; characters from 1st and 2nd lines.
You can read the docs about blade templating.
Removing the semicolon in '#section('content');' worked for me. The semicolon is not allowed in blade templating.
Related
I have been trying to make a bootstrap header so I got on the tutorial, tried making a fixed header and no luck, anyways, here's the code.
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<title><?php echo $Page; ?> - Vespr</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
You can view the page here: https://vespr.xyz/ and it's not working so I don't know how to fix it, if you could help me out and fix it that would be great. I probably made some mistake but yeah, thanks.
This should do the trick.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
...
<nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Check out this fiddle https://jsfiddle.net/nrwsbw9y/14/
Yes I'm new and yes this is probably not even a real problem, but it still bugs me...
This is what i got...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Emmet & Bootstrap</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
</head>
<body>
<div class="navbar">
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</div>
<!-- JavaScript -->
<script src="dist/js/jquery.js"></script>
<script src="dist/js/bootstrap.js"></script>
</body>
</html>
And this is what i get...
What have i missed? (I'm running this in Chrome using the Brackets (node.js based) live preview)
EDIT1:
#Nhan I want the smallest possible bit of html that's still valid in the scenes of bootstrap. I.e. The least amount of rows that still change appearance if i exclude the bootstrap.css. I'm not looking for a specific "look" i just want to learn the fundamentals of bootstrap, from the ground up (I.e. i have no interest in a flying start / ctrl+c, ctrl+v).
You're missing about 90% of the navbar related structure. From: http://getbootstrap.com/components/#navbar
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Bootstrap is almost certainly fine, you just need to provide it with the correct working materials to style. I put your navbar code into a bootstrap page I know works and got the exact same output you're seeing due to the lack of appropriate styles and structure.
I see what you mean. Below is the minimal markup required to implement a Bootstrap navbar:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- navbar-default: default colour scheme -->
<nav class="navbar navbar-default">
<!-- Bootstrap container -->
<div class="container">
<!-- Toggle menu on smaller screen sizes (mobile) -->
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"> + </button>
<!-- Bootstrap collapse, work with the button above -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Link list -->
<ul class="nav navbar-nav">
<li class="active">
Link
</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
I am a newbie to bootstrap and now I wish to use its navbar and dropdown elements. When I copied the code of its example (see below) and click on the dropdown element, the expected dropdown menu doesn't appear, which is different with its original page. Could you please tell me how to enable it? Thanks!
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
<!-- 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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You have wrong order of javascript files, Bootstrap requires jQuery, just change order
<!-- FIRST jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<!-- THEN bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Next time take a look into developer console of your browser, bootstrap prints error message when jQuery isn't present
bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires
jQuery
You may also want to take a look at the W3C html validator, it will let you know about html errors in your syntax, you will find out that there is no opening tag for nav (as #LeoTheLion has pointed out)
You are missing nav tag.
Add this <nav class="navbar navbar-default">
as you have closed but did not started so.
See here
You need this scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
trying to run bootstrap on my project but its not working no styles appear on local host i have added cdnjs link to my index files. trying to setup navbar initially on project but seems to be getting alot of errors on files.
headers.html
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- 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>
<a class="navbar-brand" href="#">Brand</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
index.html
<!DOCTYPE html>
<html ng-app="UploadAdmin">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Admin</title>
<link rel="stylesheet" href="bower_components/kendo/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="bower_components/kendo/styles/kendo.default.min.css"/>
<link rel="stylesheet" href="bower_components/kendo/styles/kendo.dataviz.min.css"/>
<link rel="stylesheet" href="bower_components/kendo/styles/kendo.dataviz.default.min.css"/>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.bootstrap.min.css">
<script src="bower_components/jquery/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="bower_components/kendo/js/kendo.all.min.js"></script>
</head>
<body>
<div class="container" ng-controller="UploadController">
<div ng-include src="'views/header.html'"></div>
<div ng-view class="container-fluid"></div>
<div ng-include src="'views/footer.html'"></div>
</div>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
</body>
</html>
If you're using bower, try adding the bootstrap dependency to your bower.json file as such:
"dependencies": {
"angular": "~1.3.3",
"bootstrap": "~3.2.0"
},
and add the following to your index.html file (<link> in head and <script> with your other script tags at the bottom):
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
Don't forget to bower install in your directory!
Bootstrap 3.02
I would like to have 2 fixed to top navbars similair to how Joomla! 3 implements their browse screen.
And then once you scroll navbar #2 butts up against the top one:
I have looked at:
Bootstrap 3 multiple navbars
https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/aAGJKArh-8E
but trying multiple snippets I cannot get this to work. Can anyone help with a working demo in jsFiddle?
The code below is a basic start using two navbars and affix.
HTML
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
<div class="divide-nav">
<div class="container">
<p class="divide-text">Some Text Here</p>
</div>
</div>
<nav class="navbar navbar-default navbar-lower" role="navigation">
<div class="container">
<div class="collapse navbar-collapse collapse-buttons">
<form class="navbar-form navbar-left" role="search">
<button class="btn btn-success">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="filler"></div>
</div>
</div>
CSS
body{
margin-top: 50px;
}
.divide-nav{
height: 50px;
background-color: #428bca;
}
.divide-text{
color:#fff;
line-height: 20px;
font-size:20px;
padding: 15px 0;
}
.affix {
top: 50px;
width:100%;
}
.filler{
min-height: 2000px;
}
.navbar-form {
padding-left: 0;
}
.navbar-collapse{
padding-left:0;
}
JavaScript
$('.navbar-lower').affix({
offset: {top: 50}
});
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>body { padding-top: 70px; }</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
Top Nav
</div>
</nav>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<img src="Desert.jpg" style="width: 100%; height: auto;">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body></html>
Video link
Try this :
<div class="navbar navbar-fixed-top">
<nav class="navbar navbar-default>
navbar1
</nav>
<nav class="navbar navbar-default">
navbar2
</nav>
</div>
This code will work for u.But when boostrap4 release i think its better to use that one.