I have the following test code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ti Productions</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li>home</li>
<li>about</li>
<li>help</li>
</ul>
</div>
</div>
</div>
</div>
<script src="assets/js/bootstrap-collapse.js"></script>
</body>
</html>
I'm basically trying to test out the collapsable menu shown here:
http://twitter.github.io/bootstrap/components.html#navbar
I've downloaded the boostrap responsive css file as per the instructions, and also the collapse.js file.
The page loads file, with the menu showing. Then when I shrink the browser size, the menu collapses..and the button appears. But I can't open the menu. Whenever i click on the button to display the collapsed menu, I get the following error:
--
[19:08:40.348] TypeError: $ is undefined #
https://myserver/mysite/assets/js/bootstrap-collapse.js:126
line 126 of that file looks like this:
$.fn.collapse = function (option) {
I'm not sure what I'm doing wrong. Any guesstions would be appreciated.
EDIT 1
I've added in the missing jquery.js file but that hasn't resolved the issue.
The includes at the bottom of the page now looks like this:
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
The $ is a jQuery function and needs to be included before the bootstrap-collapse.js.
Try this sequence
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
check if jquery is properly loaded or not . IN Firebug or console try running "$". This type of errors comes , if jquery is not loaded before custom script or their is a conflict with other library using '$' like prototype.
Related
This question already exists:
Finding to position logo on bootstrap very difficult
Closed 5 years ago.
I am trying to position my logo at the top left, inside the navbar.
My logo will not respond when I try to position it to the far-left of the navbar using 'margin-right'.
When I position the logo to the left, it is pushing the menu out to the right to the middle of the navbar.
Could anyone give me advice?
Thank you.
<!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>Arabella Hill</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 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="navbar navbar-default 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='#'><img src="img/arabella.png" class="img-responsive" img style="max-width:300px; margin-top:-80px; margin-right: 100px;"></a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li class="dropdown">
Themes<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Admin & Dashboard</li>
<li>Admin 1</li>
<li>Admin 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Have you tried using "margin-left" with a negative value?
... margin-top:-80px; margin-left:-20px; ...
You may need to alter the value to suit the image dimensions.
There may be some other styling on the .navbar or .navbar- header classes that's pushing it right.
Have a look on the the browser inspection tool to check these DIVs for extra styling.
Get rid of the margin-right on your logo. That is pushing your nav to the right.
I would advise putting your styles in a CSS file but if you're going to do inline try something like this if you want it against the left side of the screen
<a class="navbar-brand" href='#'><img src="img/arabella.png" class="img-responsive" style="max-height:50px; margin-top:-80px; margin-left: -30px;"></a>
I would also advise using the developer inspector on your browser to see how padding and margin are affecting the logo.
I am new to bootstrap and am trying to figure out why my menu on the a smaller screen overlaps my picture instead of pushing it down.
I want to have a fixed menu on all screen sizes and it is fine on the desktop sizes, and is actually fixed on 768px. But it needs to push the content down vertically on smaller sizes and right now it is going over the top of my picture.
I have seen the post that said to change to a static header, which I tried, but lost the fixed header in the desktop and still did not push the picture down when expanding the menu on a smaller screen. Something must be off with my basic structure perhaps, as opposed to my css, as I have not really styled the small sized screens yet with css since it seems like a different type of problem. I want to keep the fixed header at all times, and push content down on smaller sizes using the sandwich menu, in what I would think is a more normal process.
Bootstrap is v3.3.7
Any insight would be greatly appreciated
<!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">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/head-wrapper.css" rel="stylesheet" type="text/css">
<link href="css/navbar1.css" rel="stylesheet" type="text/css">
<link href="css/menu.css" rel="stylesheet" type="text/css">
<link href="css/first-picture.css" rel="stylesheet" type="text/css">
<!-- 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>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="top-header"><div class="top-header">
<div id="header-wrapper">
<div class="telephone-icon"><span class="glyphicon glyphicon-phone-alt"></span></div>
<div class="tele-number">530-273-1343</div>
<div class="email-icon"><span class="glyphicon glyphicon-envelope"></span></div>
<div class="email-address">Email CBC</div>
</div>
</div></div>
<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="#topFixedNavbar1" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav">
<li>I'm New</li>
<li>Beliefs</li>
<li>Ministries</li>
<div class="menu-picture"><span class="navbar-brand" href="#"><img src="images/GBCBC-LOGO2.jpg" alt="My Logo"></span></div>
<li>Missions</li>
<li>Sermons</li>
<li>News/Events</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<div class="container-fluid test">
<div class="first-picture"><img src="images/sermon.jpg" width="960" height="600" alt=""/></div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
I need to reuse the boostrap navbar on all pages so I been trying to have a single file for the menu and render it using a ng-include angularJS tag
The menu is this file /partials/top_menu.html
<div class="container">
<!-- 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="index.html">EXAMPLE</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>
Quienes Somos
</li>
<li>
Organización
</li>
<li>
Servicios
</li>
<li>
Clientes
</li>
<li>
Galeria
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
And here is the index.html that tries to include that partial as the navigation menu of the page
<!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>TITLE</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js 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/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]-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div ng-include="'partials/top_menu.html'"></div>
</nav>
<body>
The problem is that the menu bar is not being render at all and the WebDeveloper console does not show any error or file missing
What am I doing wrong or if this is the wrong aproach to do it let me know can I achieve it
You need to add the ng-app to the body tag of your index.html
<body ng-app>
This is AngularJS bootstraping directive. Without this, the AngularJS process does not start.
And you need to do that for any html file that needs to use angularJS directives
Use this script may be it help you :
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
Must include Jquery file.
I'm just following a bootstrap tutorial, but I got stuck with some weird thing.
chrome and safari show mobile collapse differently with the same code.
I even tried 'copy and paste'!!
this is mobile nav-collapse on safari which it is a correct view.
but on chrome, it just doesn't work somehow.
this is the same one on chrome.
i got no error on console.
I used bower to download jquery and bootstrap.
this is the html code.
main.js and main.css are just empty files.
this is just a very basic bootstrap... but I don't know why..
how can I fix it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Set the viewport so this responsive site displays correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 Responsive Design Tutorial | RevillWeb.com</title>
<!-- Include bootstrap CSS -->
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/assets/main.css">
</head>
<body>
<!-- Site header and navigation -->
<header class="top" role="header">
<div class="container">
<a href="#" class="navbar-brand pull-left">
BS3 TUTORIAL
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="navbar-nav nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!-- Include jQuery and bootstrap JS plugins -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/main.js"></script>
</body>
</html>
I'm new to bootstrap, i'm working with the last version. I want to do a simple site, to get to know bootstrap, but already have a problem, that I can't solve. The navbar and the icon appears to be ok, but when I click, nothing happend. I have put my complete code bellow.
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting started with Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<script src="js/bootstrap.js"></script>
</head>
<body>-->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Site name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<nav class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>
</div>
I am somewhat new to using Bootstrap as well and I think I may have found some answer to your problem. It looks like you downloaded all the libraries but you may not have included all the jquery, JS, and Popper.js links in your head.
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
It happened to me too because I didn't link all the libraries. So check to see if there aren't any libraries you didn't refer to in your head.
PS: Sorry I don't use the downloaded version of the libraries so I can't tell you specifically which files and libraries to select.
Hope it helps still ;)