Bootstrap 3 Collapsing - javascript

This is my coding of navbar. When I switch to mobile view navbar works fine, but when I add some php content like include some pages by using using include function of php, then its stop working collapsing.
enter code here <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navbar</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!--<!-- Nav bar fixed to top-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#head">Mohit Sharma</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><img src="images/newlogo.png" /></li>
<li class="active">Training <span class="sr-only">(current)</span></li>
<li>Skills</li>
<li>Projects</li>
<li>Hobbies</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><img src="images/newlogo.png" /></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><!-- /.navbar -->
</body>
</html>

Related

BootStrap navbar not showing

I was working on the tutorial to build a simple website, when I tried running the bootstrap template, it does not seem to show up
The screenshot of the website
I've included the bootstrap.js file as well as the jquery, here's my code to take a look at:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="/css/bootstrap.css">
<script src ="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button 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>
<a class="navbar-brand" href="#">Kevo's Website</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<h1>Welcome</h1>
<p>This is the welcome page</p>
</div>
</div><!-- /.container -->
</body>
</html>
From your screenshot, I would guess that /css/bootstrap.css is returning a 404, or you are using the browser's ability to load HTML from the file system (by double clicking on your index.html file) in which case the reference /css/bootstrap.css is looking for a folder on your root drive with the path /css/bootstrap.css. If you have the css file int he same folder just drop the /css/ and it should work.
Looks fine to me. As Jason mentioned, I think your local bootstrap file isn't being called correctly.
.row {
margin-top: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button 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>
<a class="navbar-brand" href="#">Kevo's Website</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<h1>Welcome</h1>
<p>This is the welcome page</p>
</div>
</div><!-- /.container -->
Looks like your css/boostrap is not linked correctly, if your doing this on your local machine try view source and click the css path if its there. and jquery and boostrap.js must be place before the body tags ends.
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button 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>
<a class="navbar-brand" href="#">Kevo's Website</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<h1>Welcome</h1>
<p>This is the welcome page</p>
</div>
</div><!-- /.container -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/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>

Bootstrap Dropdown Not Un-Collapsing Menu

I've looked everywhere, but can't seem to find the answer to my solution. I am following a tutorial on how to make a navbar for my website and I am trying to make it mobile friendly as well. I want the navbar to display a button that un-collapses the menu on a smaller device. But even after I added jQuery, it still doesn't open the menu.
Here is my code that I have, hopefully it is just a simple fix that I am overlooking.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Personal Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/main.css">
<!-- 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 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="mainNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Test
</div>
<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="nav navbar-nav">
<li class="active">Home </li>
<li>About </li>
<li>Contact </li>
<!-- Drop Down Menu -->
<li class="dropdown">
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>About </li>
<li>Contact </li>
</ul>
</li>
</ul>
<!-- Right Align -->
<ul class="nav navbar-nav navbar-right">
<li>Logout </li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Thanks for the help in advance!
only update data-target="mainNavbar" Replace To data-target="#mainNavbar"
Update one Line only
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbar">
<meta charset="UTF-8">
<title>Personal Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/main.css">
<!-- 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 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Test
</div>
<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="nav navbar-nav">
<li class="active">Home </li>
<li>About </li>
<li>Contact </li>
<!-- Drop Down Menu -->
<li class="dropdown">
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>About </li>
<li>Contact </li>
</ul>
</li>
</ul>
<!-- Right Align -->
<ul class="nav navbar-nav navbar-right">
<li>Logout </li>
</ul>
</div>
</div>
</nav>
there is a mistake in your button. you forgot to place the # in your data-target attribute.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

Twitter Bootstrap, Nav-bar , Drop down not working properly

I am trying to make a responsive nav-bar with bootstrap. However, the drop down menu is not working properly.
I want to have the drop down under the brand name not along with it.
Here is my code:
<html>
<head>
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
ACUPRESSURE
<button type="button" class = "navbar-toggle" data-toggle ="collapse" data-target = ".navHeaderCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
<script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src= "js/bootstrap.js"></script>
</body>
</html>
You're missing the navbar-header class that surrounds navbar-toggle and navbar-brand. See the Docs.
Working Example.
<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" />
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>ACUPRESSURE
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
</ul>
</div>
</div>
</div>

How to collapse navbar menu on click ONLY, not open, having trouble figuring this one out

Okay so I'm trying to create a navbar that collapses the hamburger menu when a link is closed. The problem is the method I'm using also opens the hamburger menu when I click a link. This is okay with all the regular links in the navbar. But I do not want this to happen with the navbar-brand. I need it to only collapse the menu when it's opened. However, even when the menu is closed the navbar-brand on click will open it.
here is the code, I tried all sorts of javascript but I think I need help with my specific situation.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#brand" data-target="#navbar"><img style="height:31px; width:170px;" src="images/img.svg"></a>
<!-- Start Collapse Button -->
<button 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>
<!-- End Collapse Button -->
</div>
<!-- Start Links -->
<div id="navbar" class="navbar-collapse collapse">
<!-- Left Links -->
<ul class="nav navbar-nav">
<li>IT</li>
<li>CLOUD</li>
<li>HIPAA</li>
<li>SECURITY</li>
<li>CONTACT US</li>
<li>ABOUT</li>
</ul>
</div>
<!-- End Links -->
</div>
You can hook up to the click event of the hamburger and reset the css classes on the menu
$('.navbar-brand').click(function() {
$('.navbar-toggle').attr('aria-expanded', false);
$('.navbar-toggle').addClass('collapsed');
$('.navbar-collapse').attr('aria-expanded', false);
$('.navbar-collapse').addClass('collapse');
$('.navbar-collapse').removeClass('in');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#brand" data-target="#navbar">
<img style="height:31px; width:170px;" src="http://lorempixel.com/170/31" />
</a>
<!-- Start Collapse Button -->
<button 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>
<!-- End Collapse Button -->
</div>
<!-- Start Links -->
<div id="navbar" class="navbar-collapse collapse">
<!-- Left Links -->
<ul class="nav navbar-nav">
<li>IT
</li>
<li>CLOUD
</li>
<li>HIPAA
</li>
<li>SECURITY
</li>
<li>CONTACT US
</li>
<li>ABOUT
</li>
</ul>
</div>
<!-- End Links -->
</div>

Responsive Menu Using Bootstrap

Can Any one help me for the menu creating using Bootstrap CSS
every tutorial of bootstrap menu does not full fill my requirement
so please can any one tell me how to create Responsive menu
Image contains two images 1 for normal browser and another image is for mobile
I have tried the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Static Navbar Extended</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
<script>
</script>
</head>
<body>
<div class="bs-example">
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand -->
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home </li>
<li>Profile</li>
<li>Login</li>
</ul>
<!-- <ul class="nav navbar-nav">
<li>Login</li>
</ul> -->
</div>
</nav>
</div>
</body>
</html>
Have you checked these examples?
Bootstrap navbar
Bootstrap navbar-static-top/
Bootstrap navbar-fixed-top/
do exactly what you need
in addition, this utility allows you to create the bootstrap navbar
UPDATE
JSFIDDLE
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="test">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#link1" style="display:none;" id="link">item 1</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
</div>
$(document).ready(function() {
//control for the creation
if($(window).width() < 767){
$("#link").show();
}
});
$(document).load($(window).bind("resize", do_menu));
function do_menu(){
if($(window).width() < 767){
$("#link").show();
}else{
$("#link").hide();
}
}
I've modified the twitter bootstrap HTML code, i believe the below solution is pretty much close what you expect
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<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>
<a class="navbar-brand hidden-lg" href="#" data-toggle="dropdown">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">1 First Topic</li>
<li>1 First Topic</li>
<li>1 First Topic</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
I got my solution :
following is the code i required:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Static Navbar Extended</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
<script>
$(document).ready(function(){
$(window).resize(function(){
console.log($(window).width());
if($(window).width()<767)
{
$(".navbar-brand").html($(".active>a").text());
}
else
{
$(".navbar-brand").html("");
}
});
$("ul>li").click(function(){
//alert($(this).find("a").text());
$(".active").removeClass("active");
$(this).addClass("active");
if($("#navbarCollapse").hasClass("in"))
{
$("#navbarCollapse").removeClass("in")
$("#navbarCollapse").addClass("collapse")
}
if($(window).width()<767)
{
$(".navbar-brand").html($(".active>a").text());
}
else
{
$(".navbar-brand").html("");
}
});
});
</script>
</head>
<body>
<div class="bs-example">
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Login</li>
</ul>
</div>
</nav>
</div>
</body>
</html>

Categories