I'm using bootstrap and have a simple menu with two items
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>">
</head>
<body>
<nav 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="#navbar1">
<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="navbar1">
<ul class="nav navbar-nav navbar-right">
<li>item1</li>
<li>item2</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript" src="<?php echo base_url("assets/js/jquery-1.10.2.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script></body></html>
1) When the browser is expanded I see buttons item1, item2 on the right side and it's working well
2) When the width of the browser is smaller, menu is collapsed
collapsed menu button
3) But, after clicking on the menu button, item1 and item2 are not shown.
Any idea what is wrong?
Did you import the jquery and the bootstrap js in the html. They are required for the navigation to work in responsive mode?
If not, try adding both of them in the html:
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
You need to import/add first the jquery and then the bootstrap js, because bootstrap js is dependent of the jquery.
Thanks a lot
I was linking to wrong *.js files :(
I didn't see any error, so I thought path were correct.
Related
So I have a fixed navbar using Bootstrap 4
<div class="navbar navbar-expand-lg navbar-dark bg-dark container">
<a href="http://jthink.net/index.jsp" class="navbar-brand">
JThink
</a>
...
In my body tag I have added padding to account for the size of the fixed nav bar
<body style="padding-top: 100px;">
But of course if the screen size is not wide enough for the nav bar (such as a phone) the navbar becomes higher to fit in the links. Hence 100px is no longer large enough to avoid content being hidden by the nav bar.
So how am I meant to deal with this ?
The actual page I am working on is http://www.jthink.net/
<!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 -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid fixed-top bg-dark">
<div class="navbar navbar-expand-lg navbar-dark bg-dark container text-center">
<a href="http://jthink.net/index.jsp" class="navbar-brand">
<img src="http://www.jthink.net/images/icon32.png" width="30" height="30" class="d-inline-block align-top" alt="">
JThink
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<a class="nav-item nav-link" href="http://blog.jthink.net">
Blog
</a>
<a class="nav-item nav-link" href="http://jthink.net/jaikozforum">
User Forum
</a>
<a class="nav-item nav-link" href="http://jthink.net/songkong">
SongKong
</a>
<a class="nav-item nav-link" href="http://jthink.net/jaikoz">
Jaikoz
</a>
<a class="nav-item nav-link" href="http://albunack.net" target="_blank">
Albunack
</a>
<a class="nav-item nav-link" href="http://www.jthink.net/jaudiotagger/index.jsp">
Jaudiotagger
</a>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
Hope this helps you. The indent of my code is not good, but it had to be indented line by line (i think) so messy code, but readable for you i hope.
The navbar becomes a sort of dropdown menu (with hamburger button).
The point of this all is: You use bootstrap's functions this way nicely, imho.
Good luck with it:)
Normally when a Bootstrap navbar collapses the resulting menu is the full width of the screen. Is there any way to make it only as wide as the content and to the right of the screen?
It can be done in the following way--
working example
#media(max-width:767px){
.navbar-inverse {
width:50%;
margin-left: 50%;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid" id="nav-container">
<div class="navbar-header">
<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="#">header</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
Sign Up
<!--Studier demo</button>-->
log-in</button>
<!--<li class="diff"><a class="nav_list" href="testlogin.php">--><!--<span class="glyphicon glyphicon-log-in"></span>--> <!--Sign Up</a></li>-->
another</button>
</ul>
</div>
</div>
</nav>
</body>
</html>
I have tried numerous times to get Bootstrap to work, however even when I copy an example from Bootstrap's site, it still won't work properly as it does in the example. Here's the code I've uploaded to my server and yes, all the files are in the proper directory.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script> <![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<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]-->
</head>
<body>
<div class="navbar navbar-inverse 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">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Your classes were not correct.
You will have to make sure that since you are using a fixed-top navigation, you will want to put top margin or padding on items directly below them....
Here is a fiddle
<nav class="navbar navbar-inverse nav navbar-fixed-top" 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" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse" id="#navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
With Bootstrap 3 navigation bar, I want to display Google place options on an input text field. Following is the screen shot for same:
As can be seen from screen shots, when navbar is fixed, options are displayed at the back. And, when navbar is static, options are displayed as expected. I want the options to be displayed properly when navbar is fixed.
I tried to point the code on bootply but, it's not working. Working code at JSFiddle. Also, code is as under:
<!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.0">
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
</head>
<body style="min-height: 2000px;">
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Contact</li>
<li class="dropdown">
Find <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" name="search" style="width: 20em;" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
<script>
window.onload = function() {
var options = {
types: ['geocode']
};
var inputField;
inputField = document.getElementsByName( 'search' )[0];
new google.maps.places.Autocomplete( inputField, options );
};
</script>
Please help.
Thanks much in advance!
This is because of the z-index of your elements. Try changing the z-index of .pac-container. Example: .pac-container { z-index: 9999; }.
I have a basic page like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<style>
body { padding-top: 70px; }
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- 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>
</button>
<a class="navbar-brand" href="#">Brand</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 navbar-right">
<li><span class="glyphicon glyphicon-envelope"></span></li>
<li><span class="glyphicon glyphicon-off"></span></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="container">
<div class="col-md-3">Sidebar</div>
<div class="col-md-9">Content</div>
</div>
</body>
</html>
When viewed on a small screen, as expected, the nav bar content collapses into a right-aligned button with a drop-down menu. Somewhat awkward, however, is that my envelope icon and off icon look somewhat awkward when they get collapsed into the small-screen drop-down menu. They look good, however, as simple icons with no text on the full-sized nav bar. Is there a way to have text applied to these icon links so that it will display in the collapsed menu but not in the full nav-bar? Thanks.
For exemple :
<span class="icon-bar">
<span class="visible-phone hidden-tablet hidden-desktop">myIconLabel</span>
</span>
The class visible-phone hidden-tablet hidden-desktop will show it on phone (collapsed menu), but not on tablet or desktop.