Having issues with my React.js website navbar created using bootstrap. The menu button doesn't show up when the navbar collapses at a certain point. Can someone spot what's missing in the code below?
Tried toggling by following a tutorial, but it doesn't work. Seems like something is off. Any ideas on how to fix this?
EDIT: Fixed the original issue, but now facing alignment problems. Updated the code below accordingly.
In desktop view, I want everything aligned right on the navbar except for the logo which should stay in place.
In tablet view, the navbar always appears and I don't want that. How can I change this behavior?
In mobile view, need the logo to remain static while aligning the button vertically centered and to the right side.
Appreciate any help!
Navbar.js:
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import Button from 'react-bootstrap/Button';
import {
Link
} from 'react-router-dom';
class NavBar extends React.Component {
render() {
return (
<Navbar collapseOnSelect expand="lg" className="custom-nav-bg fixed-top">
<Navbar.Brand href="#home">
<Link to="/home"><img className="custom-nav-logo"
src="logohero.png"
alt="StatHero Logo"
width="105px"
height="50px"
/></Link>
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" className="navbar-toggler-css" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="align-nav">
<Nav.Link className="custom-nav-text" href="#about">
<Link to="/about">ABOUT</Link>
</Nav.Link>
<Nav.Link className="custom-nav-text" href="#stats">
<Link to="/stats">STATS</Link>
</Nav.Link>
<Nav.Link className="custom-nav-text" href="#faqs">
<Link to="/faq">FAQS</Link>
</Nav.Link>
<Nav.Link className="custom-nav-text" href="#contact">
<Link to="/contact">CONTACT</Link>
</Nav.Link>
<Nav.Link className="custom-nav-text" href="#signup">
<Link to="/signup"><Button className="custom-nav-button">SIGN UP</Button></Link>
</Nav.Link>
<Nav.Link className="custom-nav-text" href="#login">
<Link to="/login">LOGIN</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
}
export default NavBar;
Navbar CSS (For context):
background-color: red ! important;
display: flex;
align-items: flex-end;
}
.align-nav {
display: flex;
align-content: flex-end;
}
.custom-nav-bg {
max-width: 100%;
padding-right: 50px;
padding-left: 60px;
border-radius: 0px;
background-color: #132A42;
}
.custom-nav-logo {
height: 100%;
}
a.custom-nav-text:hover {
color: #00DF8D ! important;
font-family: 'Assistant', sans-serif ! important;
}
a.custom-nav-button:hover {
color: #00DF8D ! important;
font-family: 'Assistant', sans-serif ! important;
}
.custom-nav-text {
max-width: 100%;
padding-top:10px ! important;
padding-right:20px ! important;
padding-bottom:10px ! important;
padding-left:20px ! important;
color: white ! important;
font-family: 'Assistant', sans-serif;
font-size: 20px;
font-weight: 600;
}
.custom-nav-button {
padding-right: 15px;
padding-left: 15px;
border-color: #00DF8D;
border-radius: 10px;
background-color: #00DF8D;
font-size: 20px;
font-weight: 600;
}
@media only screen and (max-width: 768px) {
.custom-nav-text {
max-width: 100%;
padding-top:10px ! important;
padding-right:10px ! important;
padding-bottom:10px ! important;
padding-left:10px ! important;
font-size: 15px;
}
.custom-nav-logo {
align-items: flex-start;
justify-content: flex-start;
}
.custom-nav-bg {
padding-left: 0px;
padding-right: 0px;
display: block;
}
}
@media only screen and (max-width: 768px) {
.custom-nav-button {
padding-right: 10px;
padding-left: 10px;
border-color: #00DF8D;
border-radius: 5px;
background-color: #00DF8D;
font-size: 15px;
}
}