I am working on a bootstrap site and are having issues with my navbar-toggle when viewed on my iphone and ipad. The dropdown button is visible, but does not respond or expand. Seems to be working well in all my computer's browsers.
I am using bootstrap v3.3.5 and jquery-1.11.3
<head>
<!-- Website Title & Description for Search Engine purposes -->
<title></title>
<meta name="description" content="">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/fonts/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<link href="includes/css/fonts.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Arvo' rel='stylesheet' type='text/css'>
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
</head>
Here is my navbar
<!--Navbar-->
<div class="navbar" role="navigation">
<div class="container">
<!--navbar responsive toggle-->
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-target="#navbar-responsive-collapse" data-toggle="collapse" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- brand and toggle grouped together for better mobile display -->
<img class="navbar-brand" src="images/navbar_logo.png" alt="logo">
</div><!--end of navbar-header-->
<div class="collapse navbar-collapse" id="navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-default" id="myNav">
<li class="active">
Home
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div><!-- end of collapse-->
</div><!-- end of container-->
</div><!-- end of navbar -->
bottom links.
<!-- All Javascript at the bottom of the page for faster page loading -->
<!-- First try for the online version of jQuery-->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>window.jQuery || document.write('<script src="includes/js/jquery-1.11.3.min.js"><\/script>')</script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
here is a js.fiddle if you would like to see the css: https://jsfiddle.net/Dinkledine/asLLydyz/8/
I've seen similar posts to this, and these are the workarounds I've gathered. So far none of them have worked. So i'm starting to think its my markup.
ive tried:
updating bootstrap from v3.3.4 to v3.3.5.....
updating jquery from 1.8.2 to 1.11.3.....
replacing "ontouchstart" to "disable-ontouchstart" within bootstrap.min.css
thanks for your help!
Bootstrap v2 Dropdown Navigation not working on Mobile Browsers
Safari on iPhone only support click event for <a> and <input> element.
You can find your fix here.
<button class="collapse navbar-collapse" id="navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-default" id="myNav">
<li class="active">
Home
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
in css:
body{z-index:-1}
Related
bootstrap3 navbar collapse worked on jsfiddle as following.
https://jsfiddle.net/wa3he6bn/1/
<html>
<header>
<title>title</title>
....
</header>
<body>
<div class="wrap">
<nav id="w1" class="navbar-default navbar-fixed-top navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w1-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="/index.php">Logo</a></div>
<div id="w1-collapse" class="collapse navbar-collapse">
<ul id="w2" class="navbar-nav navbar-right nav">
<li>主页</li>
<li>文档</li>
<li>卷库</li>
<li class="help-link"><a href="javascript:void(0);"><span
class="glyphicon glyphicon-question-sign"></span></a></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
but when save same html and run locally, it does not collaspe.
First of all use <head> instead of <header> then Try to use this meta tag in your <head> section
<meta name="viewport" content="width=device-width, initial-scale=1">
then the navbar will collapse for all screen sizes smaller then 768px as bootstrap's default behaviour.
So to expand it on certain screen break point you can add this class combination
navbar-expand-* to the main nav element.
Hope it works for you.
There are multiple things you should consider in your code.
You should put your resources in <head> not <header>. There is a major difference between these two, one contains machine-readable information while the other represents introductory content.
You need to load jquery.min.js before bootstrap.min.js, because the bootstrap will need to use jQuery.
You also need to add <meta name="viewport" content="width=device-width, initial-scale=1"> to your <head> to be able to control viewport in all screen sizes.
By honoring these two notes your code should work as expected.
<html>
<head>
<title>title</title>
<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" 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://ajax.googleapis.com/ajax/libs/jquery/3.5.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>
</head>
<body>
<div class="wrap">
<!-- 以下为页眉内容 -->
<nav id="w1" class="navbar-default navbar-fixed-top navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w1-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="/index.php">Logo</a></div>
<div id="w1-collapse" class="collapse navbar-collapse">
<ul id="w2" class="navbar-nav navbar-right nav">
<li>主页</li>
<li>文档</li>
<li>卷库</li>
<li class="help-link"><span class="glyphicon glyphicon-question-sign"></span></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span>
</li>
</ul>
</div>
</div>
</nav>
<!-- 结束 -->
</div>
</body>
</html>
Use <head> tag. and include js files near the end of your page, right before the closing of </body> tag.
To save time in the future, please visit bootstrap official docs.
https://getbootstrap.com/docs/4.5/getting-started/introduction/
it's one of the best and well-written documentation.
The code was working perfectly on local host with xampp. All I've done is upload it to a server and now it's not working.
I uploaded all the BS files as well. I also fixed the href links to be '..../js/bootstrap.min.js' etc. No images load and nor does bootstrap I do not think. The reason I think the problem comes from Bootstrap is because all the text/buttons still appear, they just aren't customised with the css/JS as BS does.
They are php files.
This is a link to the site: http://www.johnnythyroid.com.
I'm only new and this is just for learning so all advice is much appreciated.
This is the relevant code I think, I deleted a lot of the stupid text to make it shorter:
<!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>Jod</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel='stylesheet' type='text/css' href="johnnythyroidcom.ipage.com/css/custom icons.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<!-- 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="johnnythyroidcom.ipage.com/js/bootstrap.min.js"></script>
<!-- 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>
<div class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"> Navbar toggle </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="johnnythyroidcom.ipage.com/dansite1.php">Some Name</a>
</div>
<div class="navbar-collapse collapse" style="line-height:21px; height:140px;"> <!-- added this to prevent change of navbar height when switching between login/logout screens -->
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Account<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header"></li>
<li>Login</li>
<li>Create Account</li>
<!-- <li class="divider"></li>
<li class="dropdown-header">Portfolio</li>
<li>Portfolio 1</li>
<li>Portfolio 2</li> add divider to split up a drop down menu -->
</ul>
</li>
<li class="navbar-text pull-right signedin"> Welcome, Guest! </li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron text-center">
<h1> The </h1>
<p> A simgn </p>
Bg
ng
</div>
<div class="row-same-height">
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroidcom.ipage.com/rocket.php" class="thumbnail home-thumb">
<img src="johnnythyroidcom.ipage.com/Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme"/>
</a>
<h3> Rjj </h3>
<p>sum dolor sit amet.</p>
</p>
View more
</div>
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroidcom.ipage.com/stars.php" class="thumbnail home-thumb">
<img src="johnnythyroidcom.ipage.com/Img/sky.jpg" style="max-height:250px" alt="sky theme"/>
</a>
<h3> Ss </h3>
<p>Lorenim.</p>
View more
</div>
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroidcom.ipage.com/sky.php" class="thumbnail home-thumb">
<img src="johnnythyroidcom.ipage.com/Img/stars.jpg" style="min-height:227px" alt = "Star theme"/>
</a>
<h3> y </h3>
<p>Lorenim.</p>
View more
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p> aaaaaa </p>
</div>
<div class="navbar-text pull-right">
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-google-plus fa-2x"></i>
</div>
</div>
</div>
Try this
change
<img src="johnnythyroidcom.ipage.com/Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme">
into
<img src="http://johnnythyroidcom.ipage.com/Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme">
add http:// to your all images src
Check the console for errors.
It says, Bootstrap's JavaScript requires jQuery, As I could see, You have included it and it is loaded correctly. Include that file before including bootstrap.min.js
Also correct that path of images. Your request url becomes: http://www.johnnythyroid.com/johnnythyroidcom.ipage.com/Img/first%20rocket.jpg which is incorrect.
Note: Just a blind guess, Incorrect path could be because of .htaccess
when reffering 3rd party include css or jss
you have to use https if your server is using https
else use http
for example you are accessing your site http://yoursite.com or http://localhost
then http://getbootstrap.com/css/bootstrap.min.js or css will work
that is why it works on localhost
but if you use https for yoru site https://yoursidte.com
then http://getbootstrap.com/css/bootstrap.min.js or css will not work
you will have to user https
e.g https://getbootstrap.com/css/bootstrap.min.js or css
THIS WAS THE CASE WHY MY menu were wroking on localcomputer but not over https , after changing from http to https://getbootstrap.com/css/bootstrap.min.js or css now it is working ..
all these files can be in different locations
for example you may save bootstrap.min.css in your site folder in case you edited that file ..
I followed all the instructions from a tutorial that I watched but the responsive menu is not expanding? Even the dropdown is not working. When I click the button nothing's happening, it's only changing its color. What could I be doing wrong?
HTML
<!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></title>
<!-- Bootstrap -->
<link href="view/css/bootstrap.min.css" rel="stylesheet">
<link href="view/css/styles.css" rel="stylesheet">
<script src="js/respond.js"></script>
<script src="view/js/bootstrap.min.js"></script>
<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>
<div 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-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="#"><img src="view/images/logo.png">
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
The Institution <b class="caret"></b>
<ul class="dropdown-menu">
<li>About the Institute</li>
<li>Research & Programs</li>
<li>Board of Advisers</li>
<li>Educational Quality Team</li>
</ul>
</li>
<li>The Center</li>
<li>Opportunity</li>
<li>Get In Touch</li>
</ul>
</div>
</div></div>
JS
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
It's working now I just edited this part
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
and also deleted everything except for this
<script src="js/respond.js"></script>
thanks to everyone who answered! :)
You have bootstrap.js included twice, once before jQuery is loaded. Remove
<script src="view/js/bootstrap.min.js"></script>
in your head section
I am not able to get the navbar button to toggle the menu down when the navbar is collapsed for smaller browsers. I have tried all the suggestions on this forum regarding different js links and I have looked at the source code of numerous bootstrap example sites where the button works but I am still not able to get this to work. I can even build it in bootply where it works fine and when I bring it into my file directory it doesn't work.
Is there something in this code that is obviously preventing this from working?
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Snow's Farm</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0, user-scalable=no">
<meta name="description" content>
<meta name="author" content="">
<link href="./bootstrap.min.css" rel="stylesheet" media="screen">
<link href="./main.css" rel="stylesheet" media="screen">
</head>
<body class="bs-docs-home" style data-twttr-rendered="true">
<a class="sr-only" href="#content">Skip navigation</a>
<!-- Docs master nav -->
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
<a class="navbar-brand" href="#">Snow's Farm</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a class="dropdown" href="www.google.com"><p>The Farm Family</p></a></li>
<li><p>Mulch</p></li>
<li><p>Soil</p></li>
<li><p>Stone</p></li>
<li><p>Christmas Trees</p></li>
<li><p>Delivery</p></li>
<li><p>Pricing Documents</p></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</body>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JavaScript plugins (requires jQuery) -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./bootstrap.js"></script>
<!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
<script src="./respond.min.js"></script>
<script src="./jquery.js"></script>
I am working on a project using the bootstrap and in starting the fixed navigation on top I have found that it is hiding the links (ie. Home, Account, Logoff), presumably collapsing them. Because when i shrink it down and get the toggle it will display them after i initiate it. When I remove the .collapse from just below the first comment it displays the links. However then it will not collapse on resizing. How do I get the top nav links to show and still have the toggle work? Note: All of the file paths to the css and js are correct directories
<!DOCTYPE html>
<html>
<head>
<title>project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Problem is here -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Account</li>
<li>Logout</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<h1>Hello, world!</h1>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Turns out it was because I was trying to combine js and css from both Bootstrap 2 and 3. Once I got everything on the same playing field it works just fine.