I'm working with Node.js & express, using the Jade template for the view. My issue is that the Test text is currently hidden under the black navigation bar. How can I move it to the bottom, below the navbar? What am I missing in my code?
Here is the code for my jade layout:
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
My content:
extends layout
extends layout
block content .jumbtroon h1= 'Test'
I've placed the div.container with the same indentation level as the first div.
Rendered HTML code:
<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>
In the image provided, you can see that the test text is located below the navbar.