I've been struggling to move my hamburger menu to the right side of the screen. Despite trying various methods like float, shift right, and alignment, the menu stubbornly remains on the left. I've scoured all the Stack Overflow articles on this issue, but none of the solutions have worked for me. Can anyone offer some assistance?
import { Link } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
// The function defines the structure of the HTML for the navigation bar
function NavigationBar( {user} ) {
return (
<>
<Navbar bg="navBackground" variant="dark" expand="lg">
<Container>
<Navbar.Toggle aria-controls='basic-navbar-nav'/>
<Nav className='m-auto'>
<Nav.Link href="#about">About</Nav.Link>
<Navbar.Collapse id="responsive-navbar-nav">
{
{linksToUse.map((link) => (
<Nav.Link>{link}</Nav.Link>
))}
</Navbar.Collapse>
</Nav>
</Container>
</Navbar>
</>
);
}
// Export the component for external use
export default NavigationBar;
/* Styling for the nav bar background */
.bg-navBackground{
background-color: #333;
}
/* Setting the background color for the navbar icon */
.navbar-toggler-icon{
background-color: #333;
}
/* Styling the background of the navbar collapse area */
.navbar-collapse{
background-color: #333;
}
/* Defining the text color for nav links */
.nav-link{
color: #638797 !important;
background-color: #333;
text-align: center; /* Centering text in nav links when screen size is small */
}
/* Changing text color to white on hover */
.nav-link:hover{
color: white !important;
}
/* Setting the rest of the nav bar background color to #333 */
.container{
background-color: #333;
}