Html 标题导航栏不显示'；不要向上移动

我在HTML和CSS代码方面遇到了一个问题…它过去工作得很好，直到我决定为

和

添加一个类名，如下所示：

            <nav class="navContainer">

                <ul class="navbar">
                    <li class="leftSide navItem active"><a class=" home " href="#Home"><i class="fas fa-home"></i><br><span>Home</span></a></li>
                    <li class="leftSide navItem"><a class=" about scroll" href="#About"><i class="fas fa-id-card"></i><br><span>About Us</span></a></li>
                    <li class="middle navItem"><a class=" service scroll" href="#Services"><i class="fas fa-bolt"></i><br><span>Our Services</span></a></li>
                    <li class="middle navItem"><a class=" work scroll" href="#Work"><i class="fas fa-suitcase"></i><br><span>Our work</span></a></li>
                    <li class="rightSide navItem"><a class=" products scroll" href="#Products"><i class="fas fa-solar-panel"></i><br><span>Our products</span></a></li>
                    <li class="rightSide navItem"><a class=" contact scroll" href="#Contact"><i class="fas fa-headset"></i><br><span>Contact Us</span></a></li>

                </ul>
           <nav>

/* header st */

.mainContainer header {
    position: fixed;
    top: 0;
    background-color: #45af0d;
    width: 100%;
    height: 256px;
}


/* navBar st */

.mainContainer header .navContainer {
    display: flex;
    justify-content: space-between;
    background-color: transparent;
    text-transform: uppercase;
    font-size: 1.25rem;
    font-weight: bolder;
}

.mainContainer header .navContainer ul.navbar {
    text-align: center;
    background-color: transparent;
    min-width: 696px;
    list-style: none;
}

.mainContainer header .navContainer ul.navbar li.navItem {
    background-color: transparent;
    display: inline-flex;
}

.mainContainer header .navContainer ul.navbar li.navItem a {
    text-decoration: none;
    color: #f1f2f6;
}

.mainContainer header .navContainer ul.navbar li.navItem {
    --border-color: #f1f1f1;
    --border-width: 5px;
    --bottom-distance: 0px;
    margin: 10px;
    margin-left: 90px;
    background-image: linear-gradient(var(--border-color), var(--border-color));
    background-size: 0% var(--border-width);
    background-repeat: no-repeat;
    color: #f1f2f6;
    text-decoration: none;
    transition: background-size 200ms;
    background-position: 50% calc(100% - var(--bottom-distance));
}

.mainContainer header .navContainer ul.navbar li.rightSide {
    background-position: 100% calc(100% - var(--bottom-distance));
}

.mainContainer header .navContainer ul.navbar li.middle {
    background-position: 50% calc(100% - var(--bottom-distance));
}

.mainContainer header .navContainer ul.navbar li.leftSide {
    background-position: 0 calc(100% - var(--bottom-distance))
}

.mainContainer header .navContainer ul.navbar li:hover {
    background-size: 100% var(--border-width);
}

.mainContainer header .navContainer ul.navbar li.active {
    background-size: 100% var(--border-width);
}

.mainContainer header .navContainer ul.navbar li.navItem a i {
    color: #f1f2f6;
    font-size: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

.mainContainer header .navContainer ul.navbar li.navItem span {
    font-size: 100%;
    background-color: transparent;
    display: block;
}


/* navbar ed */


/* header ed */

命名这些类的原因是为了在滚动期间激活导航栏切换的Jquery代码

变化的最终结果如下：

li

元素不在正确的位置

我甚至删除了除SVG之外与页眉相关的所有

margin top

---

我遗漏了什么吗？

当样式的名称被更改并且以前的规则无法应用时，就会发生这种情况。因此，请尝试从以下位置编辑规则的名称：

.mainContainer header .navContainer ul.navbar { ... }

.mainContainer header .navContainer ul.navbar li.navItem { ...}

到

并将

max height

属性设置为收割台的大小，即256px

例如：

/*标题st*/
.主容器标题{
位置：固定；
排名：0；
背景色：#45af0d；
宽度：100%；
高度：256px；
}
/*纳瓦尔街*/
.mainContainer标题.navContainer{
显示器：flex；
证明内容：之间的空间；
背景色：透明；
文本转换：大写；
字体大小：1.25rem；
字体大小：粗体；
}
nav.navContainer ul.navbar{
文本对齐：居中；
背景色：透明；
最小宽度：696px；
最大高度：256px；
列表样式：无；
}
nav.navContainer ul.navbar li.navItem{
背景色：透明；
显示：内联flex；
}
.main container header.navContainer ul.navbar li.navItem a{
文字装饰：无；
颜色：#f1f2f6；
}
.main container header.navContainer ul.navbar li.navItem{
--边框颜色：#f1f1；
--边框宽度：5px；
--底距：0px；
利润率：10px；
左边距：90像素；
背景图像：线性渐变（var（--边框颜色），var（--边框颜色））；
背景大小：0%var（--边框宽度）；
背景重复：无重复；
颜色：#f1f2f6；
文字装饰：无；
过渡：背景尺寸200ms；
背景位置：50%钙（100%-var（--底部距离））；
}
.main container header.navContainer ul.navbar li.右侧{
背景位置：100%calc（100%-var（--底部距离））；
}
.main container header.navContainer ul.navbar li.middle{
背景位置：50%钙（100%-var（--底部距离））；
}
.main container header.navContainer ul.navbar li.leftSide{
背景位置：0 calc（100%-var（--底部距离））
}
.mainContainer标题.navContainer ul.navbar li:悬停{
背景尺寸：100%var（--边框宽度）；
}
.mainContainer header.navContainer ul.navbar li.active{
背景尺寸：100%var（--边框宽度）；
}
.main container header.navContainer ul.navbar li.navItem a i{
颜色：#f1f2f6；
字体大小：60px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：透明；
}
.main container header.navContainer ul.navbar li.navItem span{
字体大小：100%；
背景色：透明；
显示：块；
}
/*导航栏*/
/*标题ed*/

/*标题st*/
.主容器标题{
位置：已修复；***我认为您应该更改位置属性*/**
排名：0；
背景色：#45af0d；
宽度：100%；
高度：256px；
}
/*纳瓦尔街*/
.mainContainer标题.navContainer{
显示器：flex；
证明内容：之间的空间；
背景色：透明；
文本转换：大写；
字体大小：1.25rem；
字体大小：粗体；
}
nav.navContainer ul.navbar{
文本对齐：居中；
背景色：透明；
最小宽度：696px；
列表样式：无；
}
nav.navContainer ul.navbar li.navItem{
背景色：透明；
显示：内联flex；
}
.main container header.navContainer ul.navbar li.navItem a{
文字装饰：无；
颜色：#f1f2f6；
}
.main container header.navContainer ul.navbar li.navItem{
--边框颜色：#f1f1；
--边框宽度：5px；
--底距：0px；
利润率：10px；
左边距：90像素；
背景图像：线性渐变（var（--边框颜色），var（--边框颜色））；
背景大小：0%var（--边框宽度）；
背景重复：无重复；
颜色：#f1f2f6；
文字装饰：无；
过渡：背景尺寸200ms；
背景位置：50%钙（100%-var（--底部距离））；
}
.main container header.navContainer ul.navbar li.右侧{
背景位置：100%calc（100%-var（--底部距离））；
}
.main container header.navContainer ul.navbar li.middle{
背景位置：50%钙（100%-var（--底部距离））；
}
.main container header.navContainer ul.navbar li.leftSide{
背景位置：0 calc（100%-var（--底部距离））
}
.mainContainer标题.navContainer ul.navbar li:悬停{
背景尺寸：100%var（--边框宽度）；
}
.mainContainer header.navContainer ul.navbar li.active{
背景尺寸：100%var（--边框宽度）；
}
.main container header.navContainer ul.navbar li.navItem a i{
颜色：#f1f2f6；
字体大小：60px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：透明；
}
.main container header.navContainer ul.navbar li.navItem span{
字体大小：100%；
背景色：透明；
显示：块；
}
/*导航栏*/
/*标题ed*/

最简单的解决方案是将“display:flex”添加到“您应该更改您的position”属性中。您的代码片段没有更改任何内容。但是，我在

.mainContainer header.navCont中找到了将max height设置为256px的核心解决方案
nav.navContainer ul.navbar { ... }

nav.navContainer ul.navbar li.navItem { ... }