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
Related
I am currently working on a sticky bootstrap navbar that is transparent, but on scroll becomes a solid color so it is visibile. The code seems to be working on the desktop view and fades in and out correctly from transparent to solid. The problem I am having is that for some reason the hamburger menu drop down continues to be transparent and is not taking the background color property.
const [navbar, setNavbar] = useState(false)
const changeBackground = () => {
if (window.scrollY >= 75) {
setNavbar(true)
} else {
setNavbar(false)
}
}
window.addEventListener('scroll', changeBackground)
<nav id="home" className={navbar ? 'navbar active navbar-expand-lg fixed-top' : 'navbar navbar-expand-lg fixed-top'}>
<div className="container-fluid">
<Link className="navbar-brand"><img className="logo" src={logo} /></Link>
<button className="navbar-toggler no-border" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<FontAwesomeIcon/>
</button>
</div>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav active navBarFormat mb-2 mb-lg-0">
<li className="nav-item">
<Link
to="about"
className="nav-link ">about</Link>
</li>
</ul>
</div>
</nav>
I am trying to make my navbar sticky, but I don't know how to integrate javascript. could you help me
my code is like this
<header>
<div class="menuhd">
<div class="main_menu home_menu" >
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg navbar-light ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse main-menu-item" id="navbarNav">
<ul class="navbar-nav">
<li><i class="fas fa-house-user"></i> HOME</li>
<li><i class="fas fa-tshirt"></i>OUTFITS</li>
<li><i class="fas fa-sign-out-alt"></i> LOGOUT</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>
I'm new to Js and React, trying to make my way into this framework.
My problem is in this component, it is saying it returns nothing or return statement is missing, but i have declared my return statement as shown bellow.
const navbar = () => {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<a className="navbar-brand" href="#">Navbar</a>
<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">
<a className="nav-link active" aria-current="page" href="#">Home</a>
<a className="nav-link" href="#">Features</a>
<a className="nav-link" href="#">Pricing</a>
<a className="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
)
}
export default navbar
After some time redoing my steps and looking into my files I've notice 2 Nav.js
1 in my containers and 1 in my components.
I was eddint my Nav.js on containers but importing from components. That was my problem, after that I've edited the right file and used as mentioned by Kevin and Jayce, NavBar and it renders.
rookie mistake...
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?