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...
Related
<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<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="#" 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>
this is the code for navbar with dropdowns in bootstrap. but the problem is here dropdown is not working when is a toggle to the navbar dropdown icon
code Link: https://getbootstrap.com/docs/4.0/components/navbar/
any suggestions why it isn't working for react??
You need to use reactstrap npm package together with bootstrap. have a look here: https://reactstrap.github.io/
You should use react-bootstrap. It works fine with react and is specially made for react.
https://react-bootstrap.github.io/components/navbar/#navbars-overview
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 did look the other forums and but id didn't solve my problems. What's happening is , at a sm breakpoint in bootstrap the hamburger menu , when clicked , is pushing all the header content ( button + h1 ) to the middle and it's ruining the design of the page , how can i fix this problem?
here's my html code :
<nav class="navbar navbar-expand-md navbar-dark">
<a class="navbar-brand m-0" href="#">
<img src="images/Untitled-2.png" style="width:235px">
</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 mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">HOME<span class="sronly">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" role="button"
datatoggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
WORK</a>
<div class="dropdown-menu"
arialabelledby="navbarDropdown">
<a class="dropdown-item" href="#">GALLERY</a>
<a class="dropdown-item" href="#">VIDEO</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
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.
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>