I've been working on customizing a CSS navbar and I've managed to get it to work as desired. However, I'm facing an issue with the active state background color, which seems to be the same width as the text itself. I've spent hours searching for a solution but haven't had any luck so far. Ideally, I'd like the background color to extend slightly beyond the text's width. When I try setting the width property in CSS, it doesn't seem to adjust based on the text width.
My project is built using React and Bootstrap.
The current look can be seen in the image below. As shown, the background color matches the width of the navlink text "about".
https://i.stack.imgur.com/LMmzt.png
How can I achieve some breathing room like in the image below? In that example, there is space between the text ends and the background color.
https://i.stack.imgur.com/g7G7t.png
Below is my JavaScript code for the navigation item:
import React from "react";
import "./NaviBar3.css";
function NaviBar3() {
return (
<div className="NaviBarDiv sticky-top">
<nav className="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a
href="/"
className="d-flex align-items-center mb-3 mx-5 me-md-auto text-light text-decoration-none"
data-to-scrollspy-id="home"
>
<span className="fs-2">CM</span>
</a>
<a
href="/"
className="nav-link fs-5"
data-to-scrollspy-id="about"
>
About
</a>
<a
href="#projects"
className="nav-link fs-5"
data-to-scrollspy-id="projects"
>
Projects
</a>
</nav>
</div>
);
}
export default NaviBar3;
This is my CSS code:
.NaviBarDiv {
background-color: #282c34;
}
.active-scroll-spy {
height: 4ex;
background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
border: none;
border-radius: 5px;
font-weight: bold;
color: white;
cursor: pointer;
}
.nav-link {
margin-left: 1em;
margin-right: 1em;
display: flex;
justify-content: center;
align-items: center;
}