导航栏是固定的,所以当我移动到/团队时.页面内容隐藏在导航栏后面.我试着增加利润,但仍然不起作用.是否可以在导航栏之后添加团队组件内容?

导航栏

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相关问答推荐

如何以Angular 调整下拉控件的高度

如何在Angular material 选项卡中设置自定义圆角下划线的样式

在主零部件悬停上对子零部件设置Angular 样式

我找不出Firefox上奇怪的css行为的原因

CSS Select 器仅 Select 具有特定类名称的每行的第一个单元格

当值小于 1 时理解 flex-shrink

在 CSS 中,如何用破折号填充段落中每一行的空白区域?

为什么我的 CSS 转换在 React 18 中不起作用

如何使用 ReactJS 使用 CSS 设置 map 容器的样式

zoom 时闪烁的背景滤镜模糊

如何在 nth-child 中正确传递 CSS 变量?

如何在连字符 (-) 等特殊字符后分词

如何通过 JavaScript 重新触发 WebKit CSS 动画?

CSS:固定到底部并居中

使用边距:0 自动;在 Internet Explorer 8 中

如何强制显示垂直滚动条?

如何在 Flexbox 中禁用等高列?

CSS 外边框

将 -moz-available 和 -webkit-fill-available 放在一个宽度中(CSS 属性)

在页面内容上方浮动一个 div