Navbar项背景色未按预期工作

Question

下面是我的navbar.js

import React, { useState } from "react";
import { FiMenu, FiX } from "react-icons/fi";
import { Link } from "react-router-dom";

export default function Navbar() {
    const [open, setOpen] = useState(false);

    const handleClick = () => {
        setOpen(!open);
    };

    const closeMenu = () => {
        setOpen(false);
    };
  return (
    <div className="navigation">
      <nav className="navbar">
        <Link to="/" className="nav-logo" >
        ESEOWIE{" "}
        </Link>
        <div onClick={handleClick} className="nav-icon">
                {open ? <FiX /> : <FiMenu />}
            </div>
        <ul className={open ? "nav-links active" : "nav-links"}>
          {/* <li className="nav-item">
            <Link to="/" className="nav-link" onClick={closeMenu}>
              Homepage
            </Link>
          </li> */}
          <li className="nav-item">
            <Link
              to="/career"
              className="nav-link" onClick={closeMenu}
            >
            Political Career
            </Link>
          </li>
          <li className="nav-item">
            <Link
              to="/career"
              className="nav-link" onClick={closeMenu}
            >
            Professional Career
            </Link>
          </li>
          <li className="nav-item">
            <Link
              to="/academics"
              className="nav-link" onClick={closeMenu}
            >
              Academics Pedigree
            </Link>
          </li>

          <li className="nav-item">
            <Link
              to="/social"
              className="nav-link" onClick={closeMenu}
            >
             Social Enterprise
            </Link>
          </li>
          <li className="nav-item">
            <Link
              to="/publications"
              className="nav-link" onClick={closeMenu}
            >
             Publications
            </Link>
          </li>
          <li className="nav-item">
            <Link
              to="/contact"
              className="nav-link" onClick={closeMenu}
            >
              Contact
            </Link>
          </li>
        </ul>
      </nav>
    </div>
  );
}

null

]2]2

这里是我的navbar.css

null

.navbar {
    height: 80px;
    width: 100%;
    /* background: blue; */
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    font-size: 1.2rem;
}

.nav-logo {
    text-decoration: none;
    color: white;
    width: 101.23px;
    height: 9.67px;
    font-family: Calibre;
}

.nav-links {
    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-gap: 20px;
    list-style: none;
}

.nav-link {
    text-decoration: none;
    color: white;
    transition: 0.3s all;
}

.nav-link:hover {
    color: red;
}

.nav-icon {
    display: none;
    font-size: 2rem;
    cursor: pointer;
}



@media only screen and (max-width: 500px) {
    .navbar {
        position: relative;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        /* text-align: center; */
        /* width: 100%; */
        top: 180px;
        left: -100%;
        transition: 0.5s all;
    }

    .nav-links.active {
        background: #4D0ADB;
        left: 51px;
        /* height: 600px; */
    }

    .nav-item {
        padding: 10px 0;
        /* border-top: 1px solid red;
        border-bottom: 1px solid red; */
    }

    .nav-icon {
        display: flex;
    }
}

null

Answer 1

试试这个

.navbar {
height: 100vh; 
z-index: 5 // any value bigger than the content of the landing page will do. 
}

在landingpage的内容上也给出一个较低的Z索引