固定导航栏隐藏页面内容

Question

导航栏是固定的，所以当我移动到/team 时。页面内容隐藏在导航栏后面。我尝试添加边距但仍然不起作用。是否可以在导航栏后添加团队组件内容？ Here's how it looks

导航栏css

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 6vh;
    background-color: white;
    position: fixed;
    width: 100%;
}

这是 jsx 文件。

import React from "react";
import "../css/navbar.css";
import { Link } from "react-scroll";
import logo from "../images/logo.png";
import { Link as RouterLink } from "react-router-dom";

const Navbar = () => {
    return (
        <nav>
            <div className="nav-logo">
                <a href="/">
                    <img src={logo} alt="" />
                </a>
            </div>
            <ul className="navlinks">
                <li>
                    <Link smooth={true} to="home">
                        Home
                    </Link>
                </li>
                <li>
                    <Link smooth={true} to="about">
                        About
                    </Link>
                </li>
                <li>
                    <Link smooth={true} to="services">
                        Services
                    </Link>
                </li>
                <li>
                    <a href="/team">Our Team</a>
                </li>
                <li>
                    <a href="/">Jobs</a>
                </li>
                <li>
                    <RouterLink to="/team">Contact Us</RouterLink>
                </li>
            </ul>
        </nav>
    );
};

export default Navbar;

Answer 1

当使用固定位置的导航栏时，您应该在其下方的部分添加内边距或边距，或者添加一个空的 div，高度为：

  margin-top: 30px; // or padding-top: 30px;

将其添加到导航栏下方的部分。

Answer 2

当你有一个固定的导航栏时，最好定义一个静态高度并使用这个高度在你的内容上定义一个padding-top。

.yourcontentclass{
    padding-top:6vh;
}

固定导航栏隐藏页面内容

Fixed navbar hiding page content

css

jsx

reactjs