When I resize my browser and put it in mobile mode the button appears just fine. However, when i click on the button it does not drop the "home tab" which is what im trying to have drop. I was watching a video on youtube on how to do this but it was from 2013 and I think that is the problem. Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="Template1css.css">
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
Welcome
<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>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
</ul>
</div>
</div>
</div>
</body>
</html>
You need to add the latest jQuery CDN before bootstrap js
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="Template1css.css">
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
Welcome
<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>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Related
I have the following head on my html file, but it seems like there's something wrong, because I'm trying to use scrollspy and navbar collapse and neither of them will work
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nova Bookings</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<!-- Univia Pro Font -->
<link rel="stylesheet" href="https://use.typekit.net/wqq0dwp.css">
<!-- Franklin Gothic -->
<link rel="stylesheet" href="https://use.typekit.net/wqq0dwp.css">
<link href="css/style.css" rel="stylesheet">
</head>
This is my body:
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-custom fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" date-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
....
</ul>
</div>
</div>
</nav>
I don't see anything wrong here... Can anyone help me? Thanks!
Bootstrap should be loading/working properly with the code you posted above. The problem is that you wrote date-toggle instead of data-toggle. Test the code below to make sure it works:
<nav class="navbar navbar-expand-lg navbar-light bg-custom fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
</nav>
Yes i know this question has been asked previously on Stackoverflow millions of time,i looked over them but still unable to find what's wrong.Any help would be appreciated,thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>front page</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<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>
</div>
<div class="collapse navbar-collapse" id="mainNavbar"> <!--Main menu starts-->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
jQuery file should be loaded first in order to achieve that.
So it should be like this.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
I am pretty new to bootstrap. I am currently working on Navbar. want to make it responsive on collapse. it works perfectly fine when i am working locally. But i see that menu bar does not close contents on click. I tried to use the CSS link and script link from CDN. also made use of the folders. But i suspect somewhere script is not loading as expected.
here is my code
<html>
<!-- New: report inputs using textarea instead of single text line
-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> NB Sep 2016</title>
<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="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/menubarStyle.css">
<link rel="stylesheet" href="css/NB_GUI2.css">
<link rel="stylesheet" href="css/awsModal.css">
<link rel="stylesheet" href="css/PAmodal.css">
<link rel="stylesheet" href="css/eventTable.css">
<link rel="stylesheet" href="css/reportModal.css">
<link rel="stylesheet" href="css/textModal2.css">
</head>
<body>
<!-- ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<!--<nav class="navbar navbar-default "> -->
<nav class="navbar navbar-default 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="#menuItems" 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="#">Brand</a>-->
</div>
<div class="navbar-collapse" id="menuItems">
<ul class="nav navbar-nav">
<!--<li><span class="glyphicon glyphicon-align-left" ></span></li>-->
<li> </li>
<li>XYZ</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a style="color:white"><span>Welcome,Dr.David Yang </span></a></li>
<li> <span class="glyphicon glyphicon-user" style="color:brown"></span></li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/d3.min.js"></script>
<script src="js/fili.min.js"></script>
<!--<script src="js/bootstrap.js"></script>-->
<script src="js/MyJS34-webviewer1-test7.js" type="text/javascript"></script>
<script src="js/teechart.js" type="text/javascript"></script>
<script src="js/teechart-extras.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/downloadify.min.js"></script>
<script type="text/javascript" src="js/jspdf.debug.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/aws-sdk.js"></script>
<!-- <script src="js/PreAnnotationModal6.js" type="text/javascript"></script> -->
<script src="js/PreAnnotationModal7-webviewer1-test4.js" type="text/javascript"></script>
<script src="js/AWSmodal3-webviewer1-test1.js" type="text/javascript"></script>
<script src="js/bootstrap.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I just modified your code it's working fine now
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default row">
<div class="container-fluid">
<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="#">Welcome</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-left-sm">
<li> </li>
<li>XYZ</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a style="color:#000"><span>Welcome,Dr.David Yang </span></a></li>
<li> <span class="glyphicon glyphicon-user" style="color:brown"></span></li>
</ul>
<hr class="visible-xs visible-sm row"/>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
</body>
</html>
Here in this line <div class="navbar-collapse" id="menuItems"> add collapse class because the data-toggle = "collapse" is written on the button which is supposed to close.
I want to create a navbar with a drop down menu for mobile phones.
I've did this for some other websites and it always worked fine.
Now all of a sudden it stopped working and I wonder why..
This is the code:
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Marco Koopman
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>About me</li>
<li>My school</li>
<li>My skills</li>
<li>More info</li>
</ul>
</div>
</div>
</nav>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"/>
</body>
jQuery must come first in order and proper close script tags as your 2nd script tag is not properly closed.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Marco Koopman
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>About me</li>
<li>My school</li>
<li>My skills</li>
<li>More info</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
I have an index.html and require bootstrap.css and bootstrap.js.When I shrink desktop browser on my desktop, the navbar collapses properly. When I visit the site on my mobile device,everything is responsive EXCEPT the navbar,it doesn't collapse
here is my code
in head
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sylhet International University</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/loaders.min.css" />
<link rel="stylesheet" href="css/jquery.bxslider.css" />
<link rel="stylesheet" href="css/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/jquery.akordeon.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
in body
<!--Navigation Starts-->
<div class="navigation">
<nav class="navbar navbar-default navigation_bar scroll_border navbar-fixed-top">
<div class="container ">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>NEWS</li>
<li>BLOG</li>
<li>ADMISSION</li>
<li>COURSES</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
</div>
<!--Navigation Ends-->
in footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/bootstrap.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
You need to have bootstrap.min.js in your scripts:
<script src="path/to/bootstrap.min.js"></script>
Well, You inserted required files(jquery.min.js, bootstrap.css, bootstrap.js).
I test your body code in bootstrap template. That's right. It works in Desktop and Mobile devices correctly.
I think some other files Caused this problem. First Remove other .CSS and .JS files to check it, and then You can find problem better.
You forgot to insert : bootstrap.min.js
<script src="js/bootstrap.min.js"></script>
Also double String around js/bootstrap.min.js""