I've created a navbar with a logo but the logo is out of place (see image). I know how to shrink the image so it fits the navbar, but I want to increase the height of the navigation bar so that it matches the logo.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="Slike/logo.png" alt="LogoSlika"/>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav">
<li class="active"> Početna strana </li>
<li> Privatni korisnici </li>
<li> Poslovni korisnici </li>
<li> Uređaji </li>
<li> O Nama </li>
</ul>
</div>
</div>
</nav>
<br />
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I don't have my custom CSS. Do I need to create it ? I'm new to bootstrap.
As simple as that: add this line near including boostrap.min.css
<link rel="stylesheet" href="css/style.css">
Create a new file named style.css in css folder, and add this lines in it.
.navbar-default .navbar-nav>li>a {
padding: 20px 15px 20px 15px;
}
.navbar-default .navbar-brand {
padding-top: 0px;
}
I've tested it and worked for me 100%.
Try it:-
.navbar-fixed-top {
min-height: 80px;
}
.navbar-nav > li > a {
padding-top: 0px;
padding-bottom: 0px;
line-height: 80px;
}
#media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 20px;
padding-top: 10px;
padding-bottom: 10px;}
}
This special code works for me with a similar problem with resizing navbar-inverse. I placed the code in my bootstrap custom CSS. You can change the padding to fit hover nav color blocks. For the image issues (site logo) you can add a style="margin-top/bottom, left, right: -12px or 12px" to the
Thanks
Related
I have been learning HTML/CSS/Bootstrap for around a week now and I'm just start a portfolio website as a sort of a test as to what I am able to do so far. Currently, I am having a problem creating the "about me" page responsive due to an image I have on that page.
Link to website is here http://moeminmamdouh.000webhostapp.com/aboutme.html
The desired outcome is to basically have everything centered, however, this is what shows up https://ibb.co/idEPVT
HERE IS THE CODEPEN LINK: https://codepen.io/muchkler/project/editor/AznjbN#
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title> About Me </title>
<link rel="stylesheet" type="text/css" href="aboutme.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="icon" href="apple-icon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Moemin Mamdouh</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>Portfolio <span class="sr-only">(current)</span></li>
<li class="active">About Me</li>
<li>Contact Me</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<img src="images/rightprof.png" class="rightprof">
<div class="row">
<h1>HELLO.</h1>
<h2>I'm Moemin Mamdouh</h2>
<h3>graphic designer/ ui designer/ front-end developer</h3>
<p>I provide entrepeneurs and startups with the kick they need to help start their business. A business is nothing without a brand, and a brand requires a stable and responsive website. I will be providing designs in both Adobe Photoshop and Adobe XD as the first step to any projects, afterwards, I move on to coding the actual website using HTML, CSS, and Bootstrap. </p>
<div class="imgbtns">
<img src="images/facebook.png" height="30px" width="30px" class="facebook">
<img src="images/behance.png" height="30px" width="30px" class="behance">
</div>
</div>
</body>
</html>
and this is the CSS code:
body{
background: url(images/tom-sini-710353-unsplash.jpg);
background-position: center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
.row{
color: white;
padding-top: 350px;
padding-left: 250px;
width: 900px;
}
.rightprof{
float: right;
padding-top: 250px;
padding-right: 250px;
}
.navbar-default{
background-color: #D91E18 !important;
border-style: none !important;
}
.navbar-brand{
color: white !important;
}
.navbar-default .navbar-nav > li > a {
color: white !important;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555;
background-color: #CF000F !important;
}
#media only screen and (max-width: 992px){
.leftside{
padding: 300px;
}
}
#media only screen and (max-width: 992px){
.row{
text-align: center;
padding-right: 110px;
}
.rightprof{
}
}
#media only screen and (max-width: 1042px){
.row{
text-align: center;
}
#media only screen and (max-width: 768px){
.row{
font-size: 10px;
width: auto;
margin-right: 200px;
}
}
any help would be appreciated, thanks!
I suggest removing your about.css file. Learn the grid. Your code was missing '.container' around your '.row', and you were missing the column definition (.col-sm-8, .col-sm-4). Avoid adding CSS widths and floats to your images and content as it will blow up the responsive grid. Instead, add '.img-responsive' class to your images.
<!doctype html>
<html>
<head>
<title> About Me </title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="icon" href="apple-icon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
</head>
<body style="padding-top:70px;">
<nav class="navbar navbar-default navbar-fixed-top">
<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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Moemin Mamdouh</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>
<a href="portfolio.html">Portfolio
<span class="sr-only">(current)</span>
</a>
</li>
<li class="active">
About Me
</li>
<li>
Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-sm-8">
<h1>HELLO.</h1>
<h2>I'm Moemin Mamdouh</h2>
<h3>graphic designer/ ui designer/ front-end developer</h3>
<p>I provide entrepeneurs and startups with the kick they need to help start their business. A business is nothing
without a brand, and a brand requires a stable and responsive website. I will be providing designs in
both Adobe Photoshop and Adobe XD as the first step to any projects, afterwards, I move on to coding
the actual website using HTML, CSS, and Bootstrap. </p>
<div class="imgbtns">
<a href="https://www.facebook.com/moemin.mamdouh.3">
<img src="images/facebook.png" height="30px" width="30px" class="facebook">
</a>
<a href="https://www.behance.net/Muchkler">
<img src="images/behance.png" height="30px" width="30px" class="behance"> </a>
</div>
</div>
<div class="col-sm-4">
<img src="images/rightprof.png" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
So I've changed the css so that the navigation bar's height matches the logo's height. It works great but when I collapse it to mobile view, there is a line that's bothering me, look at the picture:
This is normal destop version:
This is collapsed mobile view:
This is collapsed mobile view when I press the burger menu. This is the problem, the grey line is out:
This is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="Slike/logo.png" alt="LogoSlika"/>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav navbar-right">
<li class="active"> Početna strana </li>
<li> Privatni korisnici </li>
<li> Poslovni korisnici </li>
<li> Uređaji </li>
<li> O Nama </li>
</ul>
</div>
</div>
</nav>
<br />
<div class="container"> <!--Container -->
<div class="row">
<!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
<div class="col-lg-12 bg-success">
<p> Outer div </p>
<div class="col-lg-6 bg-primary">
<p> Inner div </p>
</div>
</div>
</div>
</div>
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
<!-- bg-warning = Pozadina zuta -->
</body>
</html>
This is my css:
.navbar-default .navbar-nav>li>a {
padding: 21px 15px 21px 15px;
}
.navbar-default .navbar-brand {
padding-top: 0px;
}
#media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 21px;
padding-top: 10px;
padding-bottom: 10px;}
}
#media (max-width: 767px) {
.navbar-default {
line-height: 21px;
padding-top: 0px;
padding-bottom: 11px;}
}
This is the solution:
Open bootstrap.min.css file
Search for this code:
container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
margin-right:-15px;
margin-left:-15px
}
Add height:150px to the end of the above code.
After adding the code it may like this:
container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
margin-right:-15px;
margin-left:-15px;
height:150px;
}
Then save and check again.
I am trying to change/remove the border radius of the navbar component. I tried the solution discussed here, How to remove the "border-radius" of the navbar-inverse in Bootstrap 3?.
I have created a fiddle at : https://jsfiddle.net/fts1b0z9/
HTML :
<!DOCTYPE html>
{% autoescape true %}
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="/stylesheets/main.css"/>
<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.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "mainDiv">
<nav class="navbar navbar-inverse" style="border-radius:none !important">
<div class="container-fluid">
<div class="navbar-header" style="border-radius:none !important">
<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 class="navbar-brand" href="#">Website</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</div>
</body>
</html>
{% endautoescape %}
CSS:
.navbar-header{
color: #5e0231;
background-color: #5e0231;
}
.container-fluid{
color: #5e0231;
background-color: #5e0231;
width:1000px;
}
.mainDiv{
width:1000px;
position: fixed;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
}
If you notice, the maroon color spills out of the border. I am not sure how to fix this.
It would be great if someone could help me fix this.
Thanks!!
The simplest:
.navbar-inverse {
border-radius: 0;
}
isn't working? Or it isn't what you mean?
Define your custom stylesheet after the bootstrap declaration.
.navbar {
border-radius: 0;
}
I'm trying to get my hands onto some web designing and I was not able to figure out how to make the navigation buttons in my project centered. I would like the buttons from Home to Page 3 centered and was wondering if there was a simple way to do that in the HTML file alone without needing a separate CSS class.
<!DOCTYPE html>
<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 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website Name</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Make some changes in Bootstrap.CSS
May be like this...
.nav navbar-nav
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
Check here => bootply
The only way you can accomplish this is by adjusting some CSS properties. Basically remove the float from navbar-nav and center the text. But if you really want them to be centered, you have to account for the navbar-brand class by assigning it a width and adding a negative margin equal to half that width to the navbar-nav.
See working Example Snippets.
#media (min-width: 768px) {
.navbar.navbar-default {
height: 50px;
}
.navbar.navbar-default .container-fluid,
.navbar.navbar-default .container {
text-align: center;
}
.navbar.navbar-default .navbar-nav {
display: inline-block;
float: none;
margin-left: -75px;
}
.navbar.navbar-default .navbar-brand {
width: 150px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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="#">Website Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</div>
</nav>
Mobile Center
.navbar.navbar-default .container-fluid,
.navbar.navbar-default .container {
text-align: center;
}
#media (min-width: 768px) {
.navbar.navbar-default {
height: 50px;
}
.navbar.navbar-default .navbar-nav {
display: inline-block;
float: none;
margin-left: -75px;
}
.navbar.navbar-default .navbar-brand {
width: 150px;
}
}
#media (max-width: 767px) {
.navbar-default .navbar-brand.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 150px;
text-align: center;
top: 0;
}
.navbar.navbar-default > .container .navbar-brand.navbar-brand-centered,
.navbar.navbar-default > .container-fluid .navbar-brand.navbar-brand-centered {
margin-left: -75px;
margin-top: 0;
margin-bottom: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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 navbar-brand-centered" href="#">Website Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</div>
</nav>
Using this css will get your navigation button in center position.
navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
DEMO
I'm not sure why my content is disappearing almost completely, the navbar is still intact, but it won't open, the text in the navbar won't center, the paragraphs aren't responsive, my subscribe button isn't aligned. I'm extremely frustrated and I've been working on this site for a couple of weeks already. Can someone please help me with this. This is a link to the site: http://bit.ly/1kPKVzR Thanks in advance. This is the code for one of the pages in the site...
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="...">
<meta name="author" content="...">
<title>...</title>
<link rel="icon" href="images/favicon.png" type="image/x-icon" />
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="css/customstyle.css" rel="stylesheet">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
::-moz-selection {
color:#fff;
background-color:rgba(128, 128, 128, 0.3);
}
::selection {
color:#fff;
background-color:rgba(128, 128, 128, 0.3);
}
.navbar {
color:#000000;
width: 100%;
background-color: rgba(255, 255, 255, 0.0);
border-color: rgba(255, 255, 255, 0.0);
}
.logo{
display:inline-block;
position: absolute;
left:40%;
font-size: 20px;
font: 80px "munich", Sans-serf, Ariel;
margin-top: 60px;
}
.logo a:focus, .logo a:hover{
-webkit-transition:1s;
color:#999999;
text-decoration: none;
}
.logo li a:focus, .logo li a:hover{
-webkit-transition:1s;
color:#000000;
}
#font-face{
font-family:"munich";
src:url("munich.ttf") format("truetype");
}
.starter-template img{
width:450px;
height:450px;
margin: 40px 100px auto;
}
audio{
width:200px;
}
.starter-template .pull-right{
position:absolute;
}
.starter-template img{
width:450px;
height:450px;
margin:20px 100px auto;
}
#albumlinks{
margin-top:440px;
margin-right: -40em;
}
#signup{
position: absolute; right: -5000px;
}
#mc_embed_signup{
background:none; font:14px Helvetica,Arial,sans-serif; margin:500px;padding:0;
}
/**************** #media screen ********************/
#media screen and (min-width: 480px) {
#albumlinks .clear-fix .pull-right{
width:5em;
height:4em;
}
}
.navbar-default{
background-color: rgba(245, 245, 245, 0.1);
}
.navbar-nav{
margin-top: -20px;
}
</style>
</head>
<body>
<div class="logo">
<p>...</p>
</div>
<!-- Navigation -->
<nav class="navbar navbar-default 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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Bio
</li>
<li>
Lessons
</li>
<li>
Shows
</li>
<li>
Music
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="clearfix">
<div class="container">
<div class="pull-left">
<img src="../images/piano-1599x1066.jpg"/>
</div>
<p class="lead pull-right ">...</p>
</div>
</div>
<footer class="navbar-fixed-bottom ">
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<div class="navbar-text pull-right">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
</div>
<p class="pull-right">...</p>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
There is an error that says "Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher"
So you need to change the JQuery that is loaded to a newer version.
Where yours says
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
change it to
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Jquery and Bootstrap .js files are not linked properly.
Once script is working, add css to .navbar-toggle .icon-bar and navbar.
Go to your site and press Ctrl+Shift+I if you are using chrome otherwise right click and choose inspect element. Doing this will bring up the dev tools and most importantly the console.
Looking there we can see that there are errors about JQuery not being loaded.
You can include it in your site by adding the below to the section of your site.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Or alternatively fix the link to your jQuery - http://ericarodriguez.me/jarodkashkin/js/jquery.js
If you click that link you will see that the file does not exist