Jade template are not display page as expected - javascript

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

Related

How can I make the navbar scroll and fix to the top of the page when it is expanded?

When my navbar is collapsed, scrolling is normal and the navbar becomes fixed to the top of the page when scrolling past the header/ jumbotron. However, when the navbar is expanded (revealing 'one', 'two', and 'three'), the page will jump skipping some of the content and covering it up by the navbar. How can I make the page scroll/ behave "normally" and allow the expanded navbar fix to the top of the page without jumping over content below?
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<script type="text/javascript">
</script>
<style>
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
nav {
z-index: 9;
}
.emoji p:hover {
text-decoration: none;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#f64e09; color:#fff; height:200px;">
<div class="container text-center" style="color: white;">
<div>
<h1 style="font-family: 'Lobster', cursive;">Website</h1> </div>
<h1 style="font-size: 30px; font-family: 'Cabin', sans-serif;">
</h1> </div>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="container-fluid">
<div class="navbar-static-top">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a id="navId" class="navbar-brand" style="color:white;" href="#">Navbar Title</a> </div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>One </li>
<li class="active">Two </li>
<li>Three </li>
</ul>
</div>
</div>
</nav>
<!-- Start containter for everything south of navbar -->
<div class="container-fluid">
<div class="container" style="padding-top: 20px;">
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1> </div>
</div>
<div class="panel panel-default" style="font-family: 'Cabin', sans- serif;">
<div class="panel-footer">
<center>
<p>This is the footer</p>
</center>
</div>
</div>
</body>
</html>
As you probably know, the reason why your content is not "jumping" while navbar is collapsed is in this style:
.affix + .container-fluid {
padding-top: 70px;
}
But when you are extending navbar, padding remains the same, but navbar itself becames taller. So, we have to somehow distingush those situations.
We can add some javascript to add an extra class to the <nav> element:
<script type="text/javascript">
$(document).ready(function() {
var navBar = $('#myNavbar');
$('.navbar-toggle').click(function(e) {
if (!navBar.is(':visible')) {
// #myNavbar is about to be shown, add extra class to parent <nav>
navBar.parents('nav').addClass('affix-visible-navbar');
} else {
// #myNavbar is about to be hidden, remove extra class from parent <nav>
navBar.parents('nav').removeClass('affix-visible-navbar');
}
});
});
</script>
and define new css-class:
.affix.affix-visible-navbar + .container-fluid {
padding-top: 155px !important;
}
So the complete working solution will look like this:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<script type="text/javascript">
</script>
<style>
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
.affix.affix-visible-navbar + .container-fluid {
padding-top: 155px !important;
}
nav {
z-index: 9;
}
.emoji p:hover {
text-decoration: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var navBar = $('#myNavbar');
$('.navbar-toggle').click(function(e) {
if (!navBar.is(':visible')) {
// #myNavbar is about to be shown, add extra class to parent <nav>
navBar.parents('nav').addClass('affix-visible-navbar');
} else {
// #myNavbar is about to be hidden, remove extra class from parent <nav>
navBar.parents('nav').removeClass('affix-visible-navbar');
}
});
});
</script>
</head>
<body>
<div class="container-fluid" style="background-color:#f64e09; color:#fff; height:200px;">
<div class="container text-center" style="color: white;">
<div>
<h1 style="font-family: 'Lobster', cursive;">Website</h1> </div>
<h1 style="font-size: 30px; font-family: 'Cabin', sans-serif;">
</h1> </div>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="container-fluid">
<div class="navbar-static-top">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a id="navId" class="navbar-brand" style="color:white;" href="#">Navbar Title</a> </div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>One </li>
<li class="active">Two </li>
<li>Three </li>
</ul>
</div>
</div>
</nav>
<!-- Start containter for everything south of navbar -->
<div class="container-fluid">
<div class="container" style="padding-top: 20px;">
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1> </div>
</div>
<div class="panel panel-default" style="font-family: 'Cabin', sans- serif;">
<div class="panel-footer">
<center>
<p>This is the footer</p>
</center>
</div>
</div>
</body>
</html>
Of course, if you are changing #myNavbar elements (e.g. add/remove items), you have to adjust padding in the .affix.affix-visible-navbar + .container-fluid {}

How can I make this navigation bar responsive, making it become accessible with a button?

So here is my HTML:
<div class = "nav">
<div class = "top_page">
<h1 class = "mainTitle">title</h1>
<p class = "slogan">Slogan</p>
<br/>
</div>
<div class = "container">
<nav class="center-links">
<a href="/about" class = "content" >About</a>
<a href="/projects" class = "content" >Work</a>
<a href="/recruit" class = "content" >Contact</a>
<a href="/recruit" class = "content" >Recruit</a></li>
</nav>
</div>
<br />
<br />
</div>
and my current CSS for it (screens width over 808px):
.center-links {
display: table;
table-layout: fixed;
width: 100%;
text-align: center;
}
.center-links a {
display: table-cell;
background-color: #212A5C;
border: 1px solid #212A5C;
color: #FA3400;
font-weight: bold;
padding: 1.5%;
text-transform: uppercase;
}
.center-links a:hover {
background-color: rgb(230, 230, 230);
transition-duration: 0.7s;
}
With what CSS/jQuery/Javascript code can I collapse this menu in a Bar Icon from awesome fonts that will display the link with a click?
Thanks! Not using bootstrap
If you are using bootstrap than you need to use this markup to do what you want:
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="navigation">
<input type="hidden" id="pagesNr" value="2"/>
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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>
Company Name
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav scroll-nav" id="sortableMenuItems">
<li">
Home
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
<li>
Menu 4
</li>
<li>
Menu 5
</li>
</ul>
</nav>
</div>
When you see this menu in small devices it will be collapsed showing the 'hamburger' icon on the right side.
To answer your reply I have updated this, so to use bootstrap you need to put in the 'head' tag of your HTML page the following:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
The work around of this using your code is to make an hidden dropdown menu which will appear when the browser will be resized at a certain defined width, and for this you have to use #media queries. But I really believe that this is not the option you have to follow.

Centering glyphicon in navbar

I'm trying to move my glyphicon(with its text) into the middle of the navbar and make it stay centered and responsive when you thin the window down. And I don't want it to scrunch together when the window is crammed, and I don't want the dropdown menu to go off to one side or anything(since one of the offered solutions did just that, which wasn't very nice).
Have looked at lots of stackexchange solutions, such as the following:
How do I center Glyphicons horizontally using Twitter Bootstrap
Center align "span" text inside a div
how do i get glyphicon in the center of the bootstrap navbar?
But they didn't help, I tried modifying them a bit but to no avail.
This is the piece in particular where the glyphicon and button is:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" id="iconButton">
<span class="glyphicon glyphicon-menu-hamburger" style="color:white; vertical-align:middle"></a></span><font color="white"> M E N U</font>
</button>
Here's the entire code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twenty Eight Interiors</title>
<meta name="description" content="Twenty Eight Interiors">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-inverse" id="my-navbar" style="font-family:Webdings;">
<div class="container">
<div class="navbar-header" id="oneDiv">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" id="iconButton">
<span class="glyphicon glyphicon-menu-hamburger" style="color:white; vertical-align:middle"></a></span><font color="white"> M E N U</font>
</button>
</div><!-- Navbar Header -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav" id="firstOne">
<li>Design Process</li>
<li>Profile</li>
<li>Contact Info</li>
</ul>
<ul class="list-inline" id="secondOne">
<li><img src="facebook.png" hspace="30"></li>
<li><img src="twitter.png" hspace="30"></li>
<li><img src="instagram.png" hspace="30"></li>
</ul>
</div>
</div><!-- End Container img src="twitter.png"-->
</nav><!-- End navbar -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</body>
</html>
And does anyone know how I get rid of this gap?:
EDIT: The CSS
<style type="text/css">
#my-navbar{
background:rgba(0,0,0,0.9);
margin-bottom:0;
}
ul#firstOne{
background-color:rgba(48, 50, 50, 0.5);
padding: 20px;
}
ul#secondOne{
padding: 5px;
}
</style>
The navbar-toggle class floats your element to the right. You can center your button by removing the float, setting the element to display: block, and setting the left and right margin to auto.
.navbar-toggle {
float: none;
display: block;
margin: 8px auto;
}
See here: http://jsfiddle.net/keithburgie/amysg7ru/

How do i make it so bootstrap modal goes over the scroll nav?

Hello guys i'm having an issue with my bootstrap template the navigator covers the modal.. how would i go about disabling scrolling so the modal can stay above it?
my issue
http://prntscr.com/2wzx6w
sorry about the little information hit me with some examples if you need more intel.
the menu code = `
<a href="http://www.jtvdev.com"><div class="logo">
</div></a>
</div>
<!-- Logo End -->
<!-- Mobile Menu Start -->
<div class="mobile navbar-header">
<a class="navbar-toggle" data-toggle="collapse" href=".html">
<i class="icon-reorder icon-2x"></i>
</a>
</div>
<!-- Mobile Menu End -->
<!-- Menu Start -->
<nav class="collapse navbar-collapse menu">
<ul class="nav navbar-nav sf-menu">
<li>Home</li>
</ul>
</nav>
<!-- Menu End -->
</div>
</div>
<!-- Main Header End -->`
the modal code=
`
<a href="http://www.jtvdev.com"><div class="logo">
</div></a>
</div>
<!-- Logo End -->
<!-- Mobile Menu Start -->
<div class="mobile navbar-header">
<a class="navbar-toggle" data-toggle="collapse" href=".html">
<i class="icon-reorder icon-2x"></i>
</a>
</div>
<!-- Mobile Menu End -->
<!-- Menu Start -->
<nav class="collapse navbar-collapse menu">
<ul class="nav navbar-nav sf-menu">
<li>Home</li>
</ul>
</nav>
<!-- Menu End -->
</div>
</div>
<!-- Main Header End -->`
I am not able to reproduce your problem, therefore I think it is in your css file.
If you want a quick hack, try adding this to your CSS:
.modal {
z-index: 999 !important;
}
http://plnkr.co/edit/1hl6wxvCAhefIpmOv323
The CSS z-index property of navigator should be less than modal. Such as -
.modal {
z-index: 777;
}
.nav{
z-index: 77;
}
I had the same problem. Solution was:
.modal-open .navbar {
overflow: hidden;
margin-right: 17px;
}

Bootstrap Responsive Nav Bar

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>

Categories