Its not working once I upgrade into Bootstrap 5.
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria- controls="navbarCollapse" aria-expanded="false" aria- label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Sample code: https://github.com/Devgroup-Asia/larablog/blob/main/resources/views/include/navbar.blade.php
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria- controls="navbarCollapse" aria-expanded="false" aria- label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
You may use this code. In bootstrap 5 data attribute works only if you use data-bs-{variable_name}.
Related
Can anyone please tell me how to completely remove the menu button from this theme: https://github.com/vvalchev/creative-theme-jekyll-new
Just remove the button completely.
It's this part:
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
For some reason the collapsed navbar icon does not expand when clicked on on smaller screens. I copied the example from bootstrap 5 and made sure to include bootstrap css/js and jquery.
class NavBar extends Component {
render() {
return (
<div className="NavBar">
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
<div className="navbar-nav mx-auto">
<HashLink className="navbar-brand" to="/#app">
Site
</HashLink>
<HashLink className="nav-link" to="/#about">
About
</HashLink>
<HashLink className="nav-link" to="/#skills">
Skills
</HashLink>
<HashLink className="nav-link" to="/#experience">
Experience
</HashLink>
<Link className="nav-link" to="/calculator">
Calculator
</Link>
</div>
</div>
</div>
</nav>
</div>
);
}
}
The problem is we didn't add the bootstrap js file
so, add this in App.js file
import 'bootstrap/dist/js/bootstrap.bundle';
I found an answer here that works via react hooks: https://dev.to/johnotu/how-to-toggle-bootstrap-navbar-collapse-button-in-react-without-jquery-joo
import React, { useState } from 'react';
import Logo from '../images/logo_512x512.png';
const TopNav = props => {
const [isNavCollapsed, setIsNavCollapsed] = useState(true);
const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed);
return (
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
<a class="navbar-brand text-info font-weight-bolder" href="/">
<img src={Logo} alt="Logo" width="36" height="36" className="vertical-align-middle" />
<span className="">Discounter</span>
</a>
<button class="custom-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded={!isNavCollapsed ? true : false} aria-label="Toggle navigation" onClick={handleNavCollapse}>
<span class="navbar-toggler-icon"></span>
</button>
<div class={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`} id="navbarsExample09">
<a className="nav-link text-info" href="/contact">Support</a>
<a className="nav-link text-info" href="/login">Login</a>
<a href="/request-demo" className="btn btn-sm btn-info nav-link text-white" >Request demo</a>
</div>
</nav>
);
}
export default TopNav;
I was having the same issues, i fixed them by adding -bs to data-toggle & data-target. thus turning them to data-bs-toggle & data-bs-target respectively.
Here are my package.json dependencies:
"bootstrap": "^5.2.0",
"jquery": "^3.6.0",
"popper.js":
"^1.16.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Example code:
Changed from
<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>
Changed to:
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
you must have to import this.
import 'bootstrap/dist/js/bootstrap.bundle';
<nav class="navbar navbar-expand-lg navbar-light bg-light">
Navbar
Home
Link
Dropdown
Action
Another action
Something else here
Disabled
Search
so my hamburger button not closes after opening inside the page
here is my navigation code
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler navbar-toggle" type="button" data-toggle="collapse"
data- target="#navbarTogglerDemo03"
aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/"rel=""title="brand logo">//some image</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav">
<li class="nav-item active p-2">
<a class="nav-link" href="/" rel="" title="Home">home</a>
</li>
</ul>
</div>
</nav>
i have nearly the same code in some other pages and it seems to be working just fine
I think you can use javascript to close this div for sudden time or when occurred any action.
$("#employeeRegister").hide();
$("#employeeRegister").show();
<button type="submit" class="btn btn-success btn-rounded waves-effect waves-light employeeRegister" id="employeeRegister">Save Changes</button>
I have a little project to try to learn some Angular and after a few months when I did not have time to work on it I got it back now.
First I wanted to update my version of bootstrap but I am getting some problems with the navigation bar.
My navbar:
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item" *ngFor="let menuItem of menuItems" routerLinkActive="active">
<a class="nav-item nav-link" [routerLink]="[menuItem.path]" routerLinkActive="active">{{menuItem.title}}</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<i class="fa fa-linkedin-square socialIcons" aria-hidden="true"></i>
<i class="fa fa-xing-square socialIcons" aria-hidden="true"></i>
<i class="fa fa-stack-overflow socialIcons" aria-hidden="true"></i>
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
And here my current working libraries:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
I am trying to update to the official ones provided here:
https://getbootstrap.com/docs/4.1/getting-started/download/
When I update the libraries my navbar does not work at all, it only shows a link on the right top corner with the title "navbar".
Any ideas?
Thanks!
simply change navbar-toggleable-md to navbar-expand-md and for add colors, change navbar-inverse bg-inverse to navbar-dark bg-dark.
your burger-menu is left side you can change into right side by add anchor tag before button
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler navbar-toggler-right" 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>
Working Snippet
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item" *ngFor="let menuItem of menuItems" routerLinkActive="active">
<a class="nav-item nav-link" [routerLink]="[menuItem.path]" routerLinkActive="active">{{menuItem.title}}</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<i class="fa fa-linkedin-square socialIcons" aria-hidden="true"></i>
<i class="fa fa-xing-square socialIcons" aria-hidden="true"></i>
<i class="fa fa-stack-overflow socialIcons" aria-hidden="true"></i>
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
Yeah, I'm pretty sure that You should realy read this first.
Bootstrap 4, bg-inverse not showing?
I have a problem with my website when it is seen on mobile phone. I have one button that opens "table" with menu items. When I click on some menu item, correct page opens, but "table" with menu items is not closed. It closes only when I click on menu button again.
I tried all the solutions for similar situations that are offered here, but non of them worked for me.
Does anyone have a clue how can I fix this?
Thanks in advance!
Here is my code:
in head tag:
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/templatemo_custom.js"></script>
<script src="js/jquery.lightbox.js"></script>
<script src="js/bootstrap-collapse.js"></script>
in body tag:
<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 collapsed" 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>
</div>
<div id="top-menu">
<div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="show-1 templatemo_home" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-home"></span>Početna</a></li>
<li><a class="show-1 templatemo_page3" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-users"></span>Čime se bavimo</a></li>
<li><a class="show-1 templatemo_page5" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-medkit"></span>Terapija</a></li>
<li><a class="show-1 templatemo_page2" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-picture-o"></span>Galerija</a></li>
<li><a class="show-1 templatemo_page4" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-envelope"></span>Kontakt i lokacija</a></li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
You have to use javascript for that. Try below code.
<script>
function closeFunction()
{
document.getElementById('bs-example-navbar-collapse-1').style.display='none';
}
</script>
<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 collapsed" 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>
</div>
<div id="top-menu">
<div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="show-1 templatemo_home" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-home"></span>Početna</a></li>
<li><a class="show-1 templatemo_page3" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-users"></span>Čime se bavimo</a></li>
<li><a class="show-1 templatemo_page5"onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-medkit"></span>Terapija</a></li>
<li><a class="show-1 templatemo_page2" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-picture-o"></span>Galerija</a></li>
<li><a class="show-1 templatemo_page4" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-envelope"></span>Kontakt i lokacija</a></li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I've found a solution to my problem :)
In addition to Omkar solution, there should be one more function - for button it self:
<script>
function closeFunction()
{
document.getElementById('bs-example-navbar-collapse-1').style.display = "none";
}
function openFunction(){
document.getElementById('bs-example-navbar-collapse-1').style.display = "initial";
}
</script>
<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 collapsed" onclick="openFunction()" 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>
</div>
<div id="top-menu">
<div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="show-1 templatemo_home" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-home"></span>Početna</a></li>
<li><a class="show-1 templatemo_page3" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-users"></span>Čime se bavimo</a></li>
<li><a class="show-1 templatemo_page5" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-medkit"></span>Terapija</a></li>
<li><a class="show-1 templatemo_page2" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-picture-o"></span>Galerija</a></li>
<li><a class="show-1 templatemo_page4" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-envelope"></span>Kontakt i lokacija</a></li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>