I'm trying to make a top nav bar, but for some reason I can't click any of the buttons inside my website.
import '../css/TopBarStyle.css'
import Logo from './Logo'
import { Outlet, Link } from "react-router-dom";
function TopNavBar() {
return (
<div className="container">
<div className='logo-div'>
<Logo />
</div>
<div className='navigation-buttons'>
<button type="submit" onClick={() => {alert("Hello")}}>Home</button>
<button>My Projects</button>
<button>About me</button>
<button>Contact</button>
</div>
</div>
);
}
export default TopNavBar;
My css file:
.container {
margin-top: 2%;
height: 10vh;
background-color: transparent;
width: 100%;
display: flex;
flex-direction: column;
}
.navigation-buttons {
position: absolute;
text-align: end;
align-self: flex-end;
}
button {
background: rgba(255, 255, 255, 0.315);
font-size: 18px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
color: white;
padding: 15px;
margin-right: 30px;
border-radius: 12px;
border: none;
}
button:hover {
cursor: pointer;
}
I can't see where is the problem with this. I'm using safari so I can't inspect my page to see the elements
most probably logo-div is on top of .navigation-buttons, you can press Ctrl + Shift + C in chrome to see what you're clicking on
remove
position: absolutefrom".navigation-buttons"if you don't need it or addz-index: 100to it
I've tried your code and it is actually working (whenever I click the "Home" button, an alert box appears that says "Hello").
If it is not working for you, you may want to share the CSS file, so we all can check if there is a problem with styling (which can make the navbar behave differently).
AFTER EDIT
The main problem is that the buttons have a background: rgba(255, 255, 255, 0.315) which is basically white (so you can't see them if the background of the page is white too). Note that color:white will make text white as well.
You might want to change them to background-color: rgba(202, 227, 209) for example and to color:black.
This way you'll have your navigation buttons with black text and light grey background.
Hope that helps!
import '../css/TopBarStyle.css'
import Logo from './Logo'
import { Outlet, Link } from "react-router-dom";
function TopNavBar() {
return (
<div className="container">
<div className='logo-div'>
<Logo />
</div>
<div className='navigation-buttons'>
<button type="submit" onClick={(event) => {
event.preventDefault();
alert("button clicked");
}}>Home</button>
<button>My Projects</button>
<button>About me</button>
<button>Contact</button>
</div>
</div>
);
}
export default TopNavBar;
You can avoid page reload by using preventDefault() function .
<button type="submit" onClick={(event) => {
event.preventDefault();
alert("button clicked");
}}>
Home </button>