How to give navbar transparent background in React?

Question

I have an image background on the webpage therefore I'd like the navigation to be transparent, so the image could be visible. I have tried background-color: rgba(0,0,0,0.0); and background-color: transparent; - which have worked for me before in a simple html website but here there is no change. Is it not possible in react or?

Here is the navbar CSS snippet:

.navbar {
height: 80px;
display: flex;
background-color: transparent; 
justify-content: center;
align-items: center;
position: sticky;
top: 0;
font-size: 1.3rem;
border-bottom: 1px solid white; }

Here is the Navbar.js file, to make things clearer maybe:

const Navbar = () => {
return (
    <>
        <nav className="navbar">
            <div className="navbar-container">
                <Link to="/" className="navbar-logo">
                    ECO drvin
                </Link>
                <ul className="nav-menu">
                    <li className="nav-item">
                        <Link to="/" className="nav-links">
                            Home
                        </Link>
                    </li>
                    <li className="nav-item">
                        <Link to="/" className="nav-links">
                            About
                        </Link>
                    </li>
                    <li className="nav-item">
                        <Link to="/" className="nav-links">
                            Pricing
                        </Link>
                    </li>
                    <li className="nav-item">
                        <Link to="/" className="nav-links">
                            Sign up
                        </Link>
                    </li>
                </ul>
            </div>
        </nav>
    </>
)}

And further css:

.navbar-container {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
max-width: 1500px;}

.nav-menu {
width: 60vw;
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 10px;
list-style: none;
text-align: center;
justify-content: end;
margin-right: 2rem;}

.nav-item {
height: 80px;}

.nav-links {
display: flex;
align-items: center;
text-decoration: none;
justify-content: center;
height: 100%;
padding: 0 1.5rem;}

Also a note, that I am very new to React and doing this based on tutorials.

Answer 1

You can pass

background-color: ${({ useTransparent }) =>
    useTransparent ? "transparent" : "rgba(61, 39, 84, 1)"};

to the const NavBarContainer lets say. Then pass const { useTransparent } = props; to the NavBar function/class component using props and then add useTransparent to the NavBar in the HomePage too.

Answer 2

background-color: rgba(0,0,0,0.0) will work. What is likely happening is that the property is being overwritten, or their is an element contained within the navbar that has a background color specified that is the same size as the navbar.

I would recommend right clicking the element and inspecting the navbar, go look at the styles. If there is a background-color overwriting your background color it will tell you where it is coming from. Also you can check for child elements of the navbar that might have a non-transparent background color this way.