how can i get my navbar to expand , i have done everything right , i am using bootstrap4 and jquery source files.
Am i missing something?
Here is my code:
<body>
<nav class="navbar py-3 navbar-light navbar-expand-sm">
first website
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarlink" aria-controls="navbarlink" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarlink">
<ul class="navbar-nav">
<li class="nav-item active">
home
</li>
<li class="nav-item">
skills
</li>
<li class="nav-item">
about
</li>
<li class="nav-item">
projects
</li>
</ul>
</div>
</nav>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
The code works when I test it here using the Bootstrap CDN. My guess is there might be an issue with linking the files. also make sure you have linked the Bootstrap CSS file in your code.
Related
I copied the navbar from the bootstrap navbar documentation, but when I click, the hamburger menu does not work for me, it just does not display the nav items for me.
my hamburger menu
My code in bs-navbar.component.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<img src="../../assets/images/logo.png" alt="" width="55" height="60"/>
<a class="navbar-brand fw-bold ms-4" href="#">medochek</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Замовити</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Контакти</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Галерея</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Про мед</a>
</li>
</ul>
<span class="navbar-text">
+380 66-842-45-32
</span>
</div>
</div>
</nav>
I use Angular so I'm imported bootstrap like this: #import "~bootstrap/dist/css/bootstrap.css" in styles.css
You need the following imports in your framework's import style to be imported for the bootstrap navbar button to work and also for all the styles visible completely.
<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.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
The compatible versions of the above links you can check & replace for the bootstrap version you are using.
The second option is you can write your own javascript code to add/remove dynamic CSS active class from your navbar menu.
I'm making a website with Bootstrap and when I use the following code for the navbar and reduce the dimensions of the display, the hamburger menu will not expand down and show the menu options:
<nav class="navbar navbar-expand-lg fixed-top">
Title
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuItems" aria-controls="menuItems" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menuItems">
<ul class="navbar-nav">
<li class="nav-item"> <a target="_parent" class="nav-item nav-link active" href="index.html"> Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"><a class="nav-item nav-link active" href="#about">About</a></li>
</ul>
</div>
</nav>
The button is clickable but it's not showing the dropdown menu. Is it possible that someone can let me know what I'm doing wrong?
Thanks!
Your code is working in the snippet, make sure you have included Bootstrap's JavaScript file as well!
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<nav class="navbar navbar-expand-lg fixed-top">
Title
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuItems" aria-controls="menuItems" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menuItems">
<ul class="navbar-nav">
<li class="nav-item"> <a target="_parent" class="nav-item nav-link active" href="index.html"> Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"><a class="nav-item nav-link active" href="#about">About</a></li>
</ul>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
Bootstrap's Javascript controls the animations of Bootstrap components like the navbar or the carousel. Link the js files using the script tags. I would prefer not to use the minified versions (files with .min extension)
Spending hours trying to fix issue I am having with toggle menu button. Works perfectly on small screen on index page- but not working on portfolio & contact page. Despite same code & files (jquery & bootstrap files attached in same order). Any suggestions? Here is the website link: https://www.jophilippa.com/
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="portfolio.html"></a><img src="../img/logo.jpg" class="logo" width="200" height="90" alt="Jo Philippa logo"/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="../index.html">ABOUT </a> </li>
<li class="nav-item active"> <a class="nav-link" href="portfolio.html">PORTFOLIO <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="contact.html">CONTACT</a> </li>
</ul>
</div>
</nav>
By quick look at your website & source code, you are linking to your jquery files by relative paths, to be more specific i mean this block of code:
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
This works at https://www.jophilippa.com/ (as it loads https://www.jophilippa.com/js/jquery-3.4.1.min.js), but won't work at https://www.jophilippa.com/pages/portfolio.html, because that loads https://www.jophilippa.com/pages/js/jquery-3.4.1.min.js, which obviously doesn't exist).
Put a / in front of the paths, to make them absolute from the root of website:
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap-4.4.1.js"></script>
I apologize in advice for being another bootstrap navbar question but I could not find a solution in the questions already answered on here.
Thank you for your help in advance.
Using bootstrap 4.1.3.
Problem: Navbar not collapsing on link click.
The following is a link which is inside of the <head> tag (placed before the style.css, if the matters):
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
And here are two scripts placed just before the </body> tag:
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
This is my navbar code:
<nav class="navbar navbar-expand-md navbar-light fixed-top">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
EDIT:
I see what you're saying now:
Bootstrap has attributes to be applied to the tags in order for the functionality to work correctly on the navbar.
The attributes needed are the data-toggle and data-target attributes.
Change your 'a' tags to look like this:
<a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#reviews">Reviews</a>
working jsfiddle: https://jsfiddle.net/e6cfL9m0/
This question has actually already been answered here:
How to hide collapsible Bootstrap 4 navbar on click
Navbars load collapsed and improperly formatted using downloaded Bootstrap 4 Alpha code, but appear fine using the Bootstrap 4 Alpha CDN. Using the downloaded code is necessary for this project.
Navbar appearance using downloaded Bootstrap 4 Alpha code:
View image
Navbar appearance using Bootstrap 4 Alpha CDN (the look I want): View image
This is my HTML, it doesn't change:
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="#">Brand</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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About Us <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Meet the Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log In</a>
</li>
</ul>
</div>
</div>
</nav>
No idea what's wrong or how to fix this. Anyone familiar with this issue? Thanks
From Bootstrap 4 alpha 6 to beta, navbar-toggleable-* changed to navbar-expand-*, so if you're using navbar-expand-* with alpha it wouldn't work.
If you want it to work in alpha 6, it would be:
<nav class="navbar navbar-toggleable-md navbar-light">..</nav>
If you want it to work in beta, it would be:
<nav class="navbar navbar-expand-lg navbar-light">..</nav>