How do I fix my React Bootstrap Navbar? (Navbar Brand Collapse) Updated - html

Question

I have created a navbar in my React.js website using bootstrap for react. The navbar currently collapses at a certain point however my menu button does not appear. Please could someone check through the code below and let me know what I'm missing/need to do?
I have tried to add in the toggle using an example on a bootstrap tutorial site however it doesn't seem to work, I'm assuming that something is missing? Or i'm doing something wrong?
EDIT: I have fixed the original issue however all the alignment has been thrown off, I have changed the code below to the new code.
I need everything on the navbar desktop view to be aligned right except the logo which should remain where it is.
In tablet view, the navbar is automatically toggled on so always viewable? I don't want this.
In the mobile view, I need the logo to remain where it is and the button to be aligned vertically central and to the right.
Thanks in advance!
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 some 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;
}
}

Answer 1

This is the example from react-boostrap
import React from "react";
import{ Navbar, Nav, Button, NavDropdown} from "react-bootstrap";
class NavBar extends React.Component {
render() {
return (
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
<NavDropdown title="Dropdown" id="collasible-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link href="#deets">More deets</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Dank memes
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default NavBar;
check also the doc of react-boostrap for the responsive behaviours
https://react-bootstrap.github.io/components/navbar/#navbars-mobile-friendly
I would recommend you to keep align with bootstrap classes for alignment, without touching directly the css (you can do that, but try to use as much as possible their alignments). Have a look in the docs on how to position things.

Answer 2

I'm new to the web , but maybe so like this for the desktop version
import {Navbar,Nav} from 'react-bootstrap';
import '../styless/topBar.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import logo from '../assets/logo.svg';
const Header = () => {
return(
<>
<Navbar collapseOnSelect variant='dark' expand="lg" >
<Navbar.Brand className='logo-app' >
<div class="container-fluid">
<img
src={logo}
width='30'
height='30'
className='d-inline-block align-top'
alt='logo'
/>
</div>
</Navbar.Brand>
<Navbar.Brand className='brand ' href='/'>
Header
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" className="navbar-toggler-css"/>
<Navbar.Collapse id="responsive-navbar-nav" className = "justify-content-end">
<Nav >
<Nav.Link href='/'>Home</Nav.Link>
<Nav.Link href='/articles'>Article</Nav.Link>
<Nav.Link href ='/about'>About Us</Nav.Link>
<span >
<a className="btn btn_nav btn-dark " href="/login">login</a>
</span>
</Nav>
</Navbar.Collapse>
</Navbar>
</>
)}
export default Header;
'''