When I click away the menu doesn't hide, I found this code at:
http://getbootstrap.com/components/#navbar
but doesn't work as it should.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- 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.php">
<img class="desktop-logo" src="img/logo.png" alt="Company title">
<img class="mobile-logo" src="img/logo-white.png" width="169" alt="">
</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">
<li class="">List</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Yes, I got: proper libraries installed: Bootstrap v3.0.3.
There are no javascript errors, and the HTML code is valid.
Steps to reproduce:
Download the bootstrap 3.0.3 zip package, make an index.html file, insert the css and js stuff for bootstrap.
Enter the above code, and it's not closing when click or touched away.
So is the code meant to hide the menu or not ?
I had the same problem and the solution was to make sure that bootstrap.js is not referenced more than once. I had it loaded two times in my page and this rendered described problem.
<script src="/js/bootstrap.min.js"></script>
Do not load it more than once!
This should do
<script>
$(document).on('click',function(){
$('.collapse').collapse('hide');
})
</script>
This is the reference gist
https://gist.github.com/winnyboy5/8750551
In addition, I would like to point out; this problem may be caused by reference to both bootstrap.js and bootstrap.bundle.js in the HTML file. If you are referencing both bootstrap.js and bootstrap.bundle.js, removing either one will solve this problem:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collapse Test Application</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container mt-3">
<h2>Simple Collapsible</h2>
Collapse
<div id="demo" class="collapse">Simple Collapsible</div>
</div>
<!-- Collapse will open but not close if you use both of the references below. -->
<!-- Adding one of the following references to the project solves this problem. -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script> -->
</body>
</html>
The above displayed a weird behavior for me where sometimes a scroll bar would appear on the nav. That could be from some fancy css but the below fixed it for me.
$(document).on('click',function(e){
if($('#bs-example-navbar-collapse-1').hasClass('in')){
$('.collapse').collapse('hide');
}
})
There is another solution here, which also works when having sub-menus.
<script>
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
</script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
^ I had the .js file too far down. Change your lines to look like the above and the responsive button should also close the menu.
I had my Bootstrap.min.js file after jquery and css files. i moved it above and it worked for me.
I had the same problem. Don't using script "hack". Just try to use jquery 2.1.4 or older.
Related
I am very new to CSS and HTML so I am facing difficulties while designing a webpage for my school project.
Currently I am trying to insert a search bar at the middle of the navigation bar. However, I am only able to set it at the left or right of the bar. I have found codes in other websites to override the bootstrap css codes and moved the search bar to the middle of the page but when the display screen is smaller, the search bar does not fit in the drop down menu.
Webpage view
Dropdown Menu view
Here's the html file I am using to design the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %} {% endblock %} - Snaplost</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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght#700&display=swap" rel="stylesheet">
<link href="{{ url_for('static', filename='style.css' )}}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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="{{ url_for('home') }}">Snaplost.</a>
</div>
<ul class="nav navbar-nav navbar-center">
<form class="navbar-form navbar-center" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
<div class="container">
{% block content %} {% endblock %}
</div>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Can anyone advise or help me on solving this problem? Thank you!
I think you're asking how to make sure it stays in the top without wrapping around to a new line?
If so the flexbox might be your best friend here. If you use "display: flex" on the parent div it will force everything to stay in one line, unless you use the "flex-wrap: wrap" property. You can then set the width you want each element to take up in this one "row" of content, flex-grow is also a possibility.
Great info on flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope it helps!
Edit after clarification:
So to make your search bar move to the next row of content you could still use flexbox and the "flex-wrap:wrap" property on your parent element.
To make your content "wrap" onto the next row with flexbox you just need to make all the content in one row take up a total of 100% width among them or make it so the next element (or parent container) can't fit in the same row:
e.g.
first row: two elements with 33% width each
second row: one element with 35% or more defined width
[100% - (33% * 2) = 34% width or less will not wrap around]
So you could set your search bar div width to 100% or set your login and register links a larger enough width the search bar won't fit on the row...
or even simpler you could add a line break tag, "<' br '>" , before the search bar in your HTML ;)
Good luck on your project!
I'm wondering whats the right way to include js plugins into laravel to use them in every file in project....
I first included them in the file /public/index.php, worked in general but caused some issues that are not acceptable.. So I'm looking for a better way to do it.
I now tried it in my master template master.blade.php that's included in every view.. There I used:
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/sweetalert.min.js"></script>
But it's not working, getting $ is not defined... Using the CDN doesn't change anything as well, so it doesn't seem to be about the path...
Can anybody help me? Been struggling around for days with this now, testing around different ways, but nothing works....
Edit: That's the complete file master.blade.php
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Shopping Portal') }}#yield('page')</title>
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet"/>
<link href="/css/styles.css" rel="stylesheet"/>
<link href="/css/sweetalert.css" rel="stylesheet"/>
<!-- Scripts -->
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/sweetalert.min.js"></script>
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Shopping Portal') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<!-- some nav items -->
</div>
</div>
</nav>
#yield('content')
<div class="container">
<div class="row">
<footer class="text-center">
© 2016
<ul>
<li class="btn btn-default">Impressum</li>
<li class="btn btn-default">Kontakt</li>
</ul>
#yield('footer')
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="/js/app.js"></script>
</body>
</html>
Edit2: I noticed one thing now: When I'm loading jquery again out of a view (so the view starts with that:
#extends('master')
<script src="/js/jquery-3.1.1.min.js"></script>
#section('content')
), then it works (at least in that specific view), but I'm wondering why... Am I wrong that if I load jQuery in the master template its included to every tempalte using the master template as well?
on layout you can add this
#yield('scripts')
and on page.blade.php
#section('scripts')
<script type="text/javascript" src="{{ URL::asset('js/main.js') }}"></script>
#endsection
if you want script to be on all pages add it to layout
directly like this
<script type="text/javascript" src="{{ URL::asset('js/main.js') }}"></script>
I know this has been asked thousands of time and I've been looking at some of the similar questions for about and an hour now.
I can't figure out whats the problem in my code and no matter what solution I try it doesn't works.
Here is the navbar snippet in my project (derived from the bootstrap docs):
<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>{{ title }}</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-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target"#rtNavbar" 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="#">TestApp01</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-collapse" id="rtNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Some more stuff here -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I'm using bootstrap 3 for a express node.js app. And I'm using hogan templating if that matters.
<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>{{ title }}</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-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" 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="#">TestApp01</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-collapse" id="rtNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Some more stuff here -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
Just Make This Change In The data-target.
https://gist.github.com/anonymous/916bb0286c966660121fecbafdd9140a
Its because Bootstrap is not compatible with jQuery 3. Use jQuery 2, or embed jQuery Migrate after jQuery.
change your data target its wrong try like this
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#rtNavbar" aria-expanded="false">
If doesn't thats because of Bootstrap 3 is not compatible with jQuery 3.0 and above at the moment. So latest version of jQuery that can be used with Bootstrap 3 is 2.2.4.
Part of the problem might be the way (and where) the JS and jQuery is embedded in your code. I noticed - at least for the JS - that there isn't a closing </script> tag. I think your problem may be as simple as not having these tags in the right place and not being closed properly.
I've used the following <script> additions in the <head> and had the collapse button work, so you may want to try these within the <head>. It may even be as simple as not including these two scripts right below the Bootstrap CSS link. It should look something like this (for Bootstrap 3):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
You've also got a problem with the data-target in your <button> tag. Try using something like data-target""#myNavbar" instead.
The other thing is that you have a redundant navbar-collapse for the second <div> pertaining to the right-aligned elements in your bar. This could muddy the waters and cause problems. Otherwise, the rest of the code materials look good. Just try declaring the above code in the <head>. Good luck!
I am trying to load links/urls in a container field using Bootstrap Starter Template found at the following link: http://getbootstrap.com/examples/starter-template/
The following source code of the above page is given below.
<!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="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/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 these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[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-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.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
My final goal is to load the links i.e. options from the navbar/menu bar inside the container. As of now, adding a url to
"About"
opens the link in a new webpage without my navbar. Instead I would like to open the link in the the following location:
<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 -->
This would ensure that the navbar would be present while I navigate through the pages.
Please let me know if you need any confirmation. The following link can be used to see the website:
http://getbootstrap.com/examples/starter-template/
There are global sections on each page, such as the logo, navbar, footer, and so forth. The .container and it's columns may or may not change per page. If you just want to change the text inside the .container you would make a page called about.html, link to it from all instances in your menu, and copy over the entire page. You can use includes, use a CMS, or copy the entire html and then changing the html inside the section you want. To load content inside a certain div from another source you can use jQuery or javascript or an iframe, but that is not the way to do create a site normally. You can look up iframes and loading html inside a div, there's help all over for that, but normal sites are not built that way.
I've just started using Twitter Bootstrap 3.0, I've been reading the documentation and I'm trying to create a responsive navigation bar, my code is the same structure as the example in the documentation but it doesn't seem to be working for some reason.
Below is the HTML code I'm using, I'm just using the default CSS and Javascript files.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Efar Communication Services</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- For screen readers and mobiles -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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">Efar</a>
<p class="navbar-text">Business Infrastructure Solutions</p>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Products</li>
<li>Client Area</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div> <!-- End of container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The problem was that where I had <script src="//code.jquery.com/jquery.js"></script>, it turns out that the site wasn't responding and so the page couldn't use jquery, which it needs to work. So I downloaded a local copy of jquery and changed it to <script src="js/jquery.js"></script>. Now it's working fine