Having trouble making elements transparent in the background for mobile view with React.
I've attempted adding background-color and background with a value of transparent to various classes, but it's not working as intended. Any suggestions on how to resolve this?
Check out the standard view here: https://i.sstatic.net/tdJL9.png
And the mobile view here: https://i.sstatic.net/uzXOw.png
Here's the JavaScript code:
export const NavBar = () => {
return (
<nav className="flex custom-nav">
<ul className="nav-list flex">
<li><a href="#">Home</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Projects</a></li>
</ul>
<span className="social-icon-list">
<a href="#"><img className="social-icon" src={socialIcon1}
alt=""/></a>
<a href="#"><img className="social-icon" src={socialIcon2}
alt=""/></a>
</span>
<button>Let's Connect</button>
</nav>
);
}
CSS for the JavaScript file:
* {
font-family: Centra, sans-serif;
margin: 0;
padding: 0;
}
// Additional CSS rules ...
@media (max-width: 44em) {
.custom-nav {
position: fixed;
inset: 0 0 0 30%;
background: aqua;
flex-direction: column;
justify-content: start;
align-items: center;
padding: 0;
margin: 0;
}
// Additional media query rules ...
}
CSS for the entire application:
* {
background-color: #262626;
}