Im using bootstrap 4 and I have the solution to this with bootstrap 3 but appearently with bootsrap 4 is not quite the same. Im stuck and this is the last thing in need in order to complete the project.
this is my navbar (with bootstrap 4):
<nav class="navbar fixed-top navbar-expand-lg navbar-light pink" id="navbar-fixed">
<a class="navbar-brand" href="#"><img src="images/perfect-party-rental-logo.jpg" class="logo"></a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupported" aria-controls="navbarSupported"
aria-expanded="false" aria-label="Toggle navigation"></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupported">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#inflatables"><i class="fa fa-smile-o" aria-hidden="true"></i> Inflatables</a>
</li>... <!--ETC-->
And this the JS code snipppet from bootstrap 3 :
$(".navbar-collapse ul li a").click(function(event) {
$(".navbar-collapse").collapse('hide');
});
The console keep saying "collapse" is not a function :S
Any clue?
Here's an example of a working navbar in Bootstrap 4 (as you can see it doesn't require any additional JavaScript snippets).
Click the "run code snippet" button and expand to full screen for testing:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
EDIT (adding from my comment):
I checked your codepen and while it was working on my side I saw this in the console: "Uncaught Error: Bootstrap dropdown require Popper.js" which means you aren't loading the popper.js which is required for all things that pop up or drop down in Bootstrap 4. Use the files I included at the bottom of my code snippet and it should work. Also, in your codepen you are loading bootstrap 4.0.0-beta.2. That version is outdated now. Copy and paste ALL stuff from my snippet. That's why I posted it for you.
Related
I have a bootstrap nav that is a collection of copied and pasted snippets from their website, but for some reason my dropdown nav doesn't drop anything down, and I'm a bit confused why it's wrong.
Here's what I have:
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">CPM</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav me-auto">
<a class="nav-link" aria-current="page" href="{{ url_for('user.welcome') }}">Home</a>
</div>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Account
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="{{ url_for('user.welcome') }}">Settings</a></li>
</ul>
</li>
<a class="btn btn-outline-danger me-md-2" href="{{ url_for('user.logout') }}">Logout</a>
</ul>
</div>
</div>
</nav>
</div>
Most of this was snipped from the resource page for it in bootstrap's docs: https://getbootstrap.com/docs/5.0/components/navbar/
The href values come from my flask application. I imagine it's something small, but when I click on the Account button in the dropdown menu nothing drops down and I don't get to see the li for Settings.
I downloaded the main javascript and css file for bootstrap and am serving it locally.
I am studying Django and found the following problem when using staticsfiles, the toggler that appears when the screen is reduced does not extend my bootstrap navbar, I did not find the error.
NOTE: the rest works, dropdown, navbar (css / js)
NOTE1: when I use CDN everything works, including the toggler
here are the excerpts that I call staticsfiles and the link to the complete project on github
settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'staticfiles'),
)
scripts.html
{% load static %}
<script src="{% static 'jquery/dist/jquery.js' %}"></script>
<script src="{% static 'popper.js/dist/umd/popper.js'%}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Los Angeles Soccer Evolution</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 mr-auto">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="programsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Programs
</a>
<div class="dropdown-menu" aria-labelledby="programsDropdown">
<a class="dropdown-item" href="#">Lion Cubs</a>
<a class="dropdown-item" href="#">Evolution</a>
<a class="dropdown-item" href="#">Lions</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Summer Camp</a>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="tournamentsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tournaments
</a>
<div class="dropdown-menu" aria-labelledby="tournamentsDropdown">
<a class="dropdown-item" href="#">3 vs 3</a>
<a class="dropdown-item" href="#">Futsal</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Schools</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
'''
[Projeto no Github][1]
[1]: https://github.com/ChenGit55/LASE
The problem is most likely caused because on your server you are loading jQuery 3.5.0 or higher and via the CDN you were loading jQuery 3.4.1. See issue #30553.
Try downloading jQuery 3.4.1 and using that. It looks like this will be fixed in Bootstrap 4.4.2
I have been unable to get dropdowns in bootstrap 4 to function properly. I have searched for solutions, and while some have found them, they have not worked for me.
I have tried to both enable dropdown functionality using the template from the bootstrap documentation, as well as utilizing jquery for the dropdown to show on hover. Neither work. I have included all JS files that should be necessary. The dropdowns not functioning was both before and after using JS for showing the menu on hover.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="assets/img/nav_logo.png" class="img-fluid"></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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
JS for the dropdown onmouseover
$('body').on('mouseenter mouseleave','.dropdown',function(e){
var _d=$(e.target).closest('.dropdown');
if (e.type === 'mouseenter')_d.addClass('show');
setTimeout(function(){
_d.toggleClass('show', _d.is(':hover'));
$('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
},300);
});
The current site can be found here:
http://shatteredsite.com/testing/shatteredsite.html
Thanks for any help you can give me!
remove this from your ref code
<link rel="stylesheet" href="assets/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
change to this
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
same goes with these script refrences
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="assets/js/bootstrap.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
change to
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
Bootstrap v4 has recently changed dropdowns, causing the previous method to open dropdowns on hover - which you tried - no longer work.
Here's an up to date solution for v4.1.2 and above:
function toggleDropdown (e) {
let _d = $(e.target).closest('.dropdown'),
_m = $('.dropdown-menu', _d);
setTimeout(function(){
let shouldOpen = e.type !== 'click' && _d.is(':hover');
_m.toggleClass('show', shouldOpen);
_d.toggleClass('show', shouldOpen);
$('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
}, e.type === 'mouseleave' ? 300 : 0);
}
$('body')
.on('mouseenter mouseleave','.dropdown',toggleDropdown)
.on('click', '.dropdown-menu a', toggleDropdown);
See it working:
function toggleDropdown (e) {
let _d = $(e.target).closest('.dropdown'),
_m = $('.dropdown-menu', _d);
setTimeout(function(){
let shouldOpen = e.type !== 'click' && _d.is(':hover');
_m.toggleClass('show', shouldOpen);
_d.toggleClass('show', shouldOpen);
$('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
}, e.type === 'mouseleave' ? 300 : 0);
}
$('body')
.on('mouseenter mouseleave','.dropdown',toggleDropdown)
.on('click', '.dropdown-menu a', toggleDropdown);
/* not needed, simply prevents reload on nav links clicks */
$('nav a').on('click tap', e => e.preventDefault())
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href>Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href>Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href>Action</a>
<a class="dropdown-item" href>Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href>Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
I'm trying to figure out how to have a top navbar in bootstrap 4 and then when the user scrolls down a little on the page have the navbar fade in I can currently get the navbar to show up using the below script, however, it doesn't fade in it just immediately shows up very fast and awkwardly.
<script>
$(document).scroll(function(e){
var scrollTop = $(document).scrollTop();
if(scrollTop > 200){
$('.navbar').removeClass('static-top').addClass('fixed-top');
} else {
$('.navbar').removeClass('fixed-top').addClass('static-top');
}
});
</script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav><!--./nav-->
I'm looking for a navbar effect like this http://bootstraplovers.com/assan-v3.6/classic-template/html/index.html
$('.navbar').removeClass('static-top').addClass('fixed-top');
before calling .removeClass() you need to call .toggle() or other similar jquery effects. Refer to the documentation
.toggle() would hide the navbar, so maybe you want to post your question in the relevant stackoverflow section (jquery), think about how you want to build this animation and search the jquery documentation...
I'm trying to migrate to the new version of bootstrap and jQuery.
Dropdown in example not working and console outputs error:
> Syntax error, unrecognized expression: #
This is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
jquery doesn't add class "show" to parent li and doesn't change aria-expanded attribute.
Seems like jquery v3.2.1 not compatible with botstrap v4, but i saw examples which uses this versions.
Please, help me to resolve this problem.
You did not include Popper.js in your markup.
The javascript part of Bootstrap 4 has been built on top of jQuery and Popper.js. As the documentation points it out: "jQuery must come first, then Popper.js, and then our JavaScript plugins". Including Popper.js will eliminate your error.
Additionally, it is also suggested that these <script> tags should go to near to the end of the pages, right before the closing </body> tag.
So your markup should look like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>