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;

Update (css file added)

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

CodePudding user response：

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: absolute from ".navigation-buttons" if you don't need it or add z-index: 100 to it

CodePudding user response：

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>

CodePudding user response：

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!