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

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>

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>

how to make head of dropdown link clickable in navbar

I want to make the dropdown items appear on hover of the parent link, and to be clickable to a another page, how can this be done?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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"></script>
<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="#app-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-link" href="#"> <img src="assets/img/Saydullogo.png" id="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="app-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="fa fa-home"></span> Home</li>
<li class="dropdown">
<span class="fa fa-medkit"></span> Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Beauty</li>
<li>Cosmetics</li>
<li>Medicines</li>
</ul>
</li>
<li><span class="fa fa-edit"></span> Registeration</li>
<li><span class="fa fa-phone-square"></span> Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
put this css in your code
.dropdown:hover .dropdown-menu {
display: block !important;
}
check out this snippet with your code
.dropdown:hover .dropdown-menu {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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"></script>
<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="#app-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-link" href="#"> <img src="assets/img/Saydullogo.png" id="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="app-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="fa fa-home"></span> Home</li>
<li class="dropdown">
</span> Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Beauty</li>
<li>Cosmetics</li>
<li>Medicines</li>
</ul>
</li>
<li><span class="fa fa-edit"></span> Registeration</li>
<li><span class="fa fa-phone-square"></span> Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
this.girish - that code works perfectly.

Javascript elements in Bootstrap not working

I am a beginer in bootstrap. I have tried elements like navbar, dropdowns, modal, carousel etc. and none of them are working properly. I'm guessing, it is because of the JS files which are linked to it. Please help I require these elements for a project.
Thank you.
<div class="navbar navbar-default">
<div class="conatiner-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse1" 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="#" id="navbarLogo">MyWebsite</a>
</div>
<div class="collapse navbar-collapse" id="#navbar-collapse1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Projects</li>
<li>About us</li>
<li>Team</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Connect<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script scr="js/bootstrap.min.js"></script>
this works fine you have a few issues, most are typos as pointed out by #Rachel Gallen but you are also setting the id for navbar-collapse1 to its css selector value. you should set it to id="navbar-collapse1", adding the # is only used when doing a document query for the element. please review this documentation for more on selectors https://api.jquery.com/category/selectors/
<html>
<body>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse1" 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="#" id="navbarLogo">MyWebsite</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Projects</li>
<li>About us</li>
<li>Team</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Connect<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Html Navbar menu for mobile

My navbar is not working the way i want, when i resize my browser to a mobile screen-size and click the button to make the links appear, the links appear on the right side of the logo. I've looked on many websites but never found an answer.
My code:
<!DOCTYPE html>
<html>
<head>
<title>Timmage</title>
<meta charset="Utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<img class="logga" src="images/Timmage.png" alt="logga">
<button class="navbar-toggle" data-toggle="collapse" data-target = ".navHeaderCollapse">
<span class="icon-bar"></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-left">
<li class="dropdown">
Menu<b class="caret"></b>
<ul class="dropdown-menu">
<li>Profile</li>
<li>Uploads</li>
<li>Setting</li>
<li>Log out</li>
</ul>
</li>
<li>Settings</li>
<li>My Profile</li>
</ul>
</div>
</div>
</div>
<h1>Welcome to Timmage!</h1>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>
</body>
</html>
You need to wrap your logo and the toggle in a div with a class of .navbar-header
See the plnkr - https://plnkr.co/edit/sb7vJ5mMDMpO2VMPmelL?p=preview
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<img class="logga" src="images/Timmage.png" alt="logga" />
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<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 navHeaderCollapse">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
Profile
</li>
<li>
Uploads
</li>
<li>
Setting
</li>
<li>
Log out
</li>
</ul>
</li>
<li>
Settings
</li>
<li>
My Profile
</li>
<li></li>
</ul>
</div>
</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