'Uanble to click elements - React

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

javascripthtmlreactjs


Solution 1:[1]

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

Solution 2:[2]

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>

Solution 3:[3]

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!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Hritik Sharma
Solution 3

Related Questions