导航栏是固定的,所以当我移动到/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;
最佳答案
当使用固定位置导航栏时,您应该向其下方的部分添加填充或边距,或者添加一个具有一定高度的空 div:
margin-top: 30px; // or padding-top: 30px;
将其添加到导航栏下方的部分。
关于css - 修复了导航栏隐藏页面内容的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71422815/