导航栏项目背景颜色未按预期工作答案

【问题标题】：Navbar Items Background Color Not Working As Expected导航栏项目背景颜色未按预期工作
【发布时间】：2023-03-26 14:02:02
【问题描述】：

我希望我的导航栏项目具有完整的背景色，当单击汉堡包时仅显示徽标、汉堡包和手机上的导航项目。除非汉堡包关闭，否则我不希望显示着陆页的内容。
1 我想在手机上存档的图片

我有什么 [![

下面是我的 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>
  );
}

]2]2

我的 Navbar.css 在这里

.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;
    }
}

【问题讨论】：

标签： javascript html css bootstrap-4 sass

【解决方案1】：

试试这个

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

同时在着陆页的内容上给出较低的 z-index

【讨论】：