Is there a way to make the top navbar span 100% of the width? I've tried various methods, such as setting the width to 100% and even using <br> out of desperation. I also came across advice not to use rows with the navbar and attempted to stick to best practices by using a Container within the Navbar. What could be the issue with my approach?
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { Navbar, Nav, Container } from 'react-bootstrap';
import './Navigation.css';
import Table from '../../assets/table/Table';
import TableGrouping from '../../assets/table/TableGrouping';
import Home from '../../pages/Home';
const Navigation = () => {
return(
<Navbar className="navbar pt-0 fixed-top>
<Router>
<Container>
<Nav className="bg-custom col-12">
<Link className="nav-item" to="/">Home</Link>
<Link className="nav-item" to="/tableGrouping">Grouping</Link>
<Link className="nav-item" to="/table">Table</Link>
</Nav>
</Container>
<br/>
<Container>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/tableGrouping" element={<TableGrouping/>}></Route>
<Route path="/table" element={<Table/>}></Route>
</Routes>
</Container>
</Router>
</Navbar>
)
}
export default Navigation;
Below is my stylesheet:
.nav-item {
text-decoration: none;
color: white;
padding: 5px 10px 8px 20px;
}
.container {
width: 100%;
}
.bg-custom {
background-color: rgb(154, 166, 218);
width: 100%;
}