我需要引导程序的帮助。我是 Bootstrap 的初学者。我决定为我的博客使用模板。我可以自定义很多东西,但我被标题导航卡住了。当我滚动页面时,粘性导航栏会移动,菜单无法正常显示。如果有人有任何建议?
链接到我正在使用的模板
链接到我的博客:
我不得不提一下,我有 2 个 .css(1 个缩小)。
初始 CSS 代码:
#mainNav {
position: absolute;
border-bottom: 1px solid #e9ecef;
background-color: white;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#mainNav .navbar-brand img {
height: 6rem;
padding: 10px;
}
#mainNav .navbar-brand {
font-weight: 800;
color: #343a40;
}
#mainNav .navbar-toggler {
font-size: 12px;
font-weight: 800;
padding: 13px;
text-transform: uppercase;
color: #343a40;
}
#mainNav .navbar-nav > li.nav-item > a {
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
@media only screen and (min-width: 992px) {
#mainNav {
border-bottom: 1px solid transparent;
background: transparent;
}
#mainNav .navbar-brand {
padding: 10px 20px;
color: #fff;
}
#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
color: rgba(255, 255, 255, 0.8);
}
#mainNav .navbar-nav > li.nav-item > a {
padding: 10px 20px;
color: #fff;
}
#mainNav .navbar-nav > li.nav-item > a:focus, #mainNav .navbar-nav > li.nav-item > a:hover {
color: rgba(255, 255, 255, 0.8);
}
}
@media only screen and (min-width: 992px) {
#mainNav {
transition: background-color 0.2s;
/* Force Hardware Acceleration in WebKit */
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#mainNav.is-fixed {
/* when the user scrolls down, we hide the header right above the viewport */
position: fixed;
top: -67px;
transition: transform 0.2s;
border-bottom: 1px solid white;
background-color: rgba(255, 255, 255, 0.9);
}
#mainNav.is-fixed .navbar-brand {
color: #212529;
}
#mainNav.is-fixed .navbar-brand:focus, #mainNav.is-fixed .navbar-brand:hover {
color: #0085A1;
}
#mainNav.is-fixed .navbar-nav > li.nav-item > a {
color: #212529;
}
#mainNav.is-fixed .navbar-nav > li.nav-item > a:focus, #mainNav.is-fixed .navbar-nav > li.nav-item > a:hover {
color: #0085A1;
}
#mainNav.is-visible {
/* if the user changes the scrolling direction, we show the header */
transform: translate3d(0, 100%, 0);
}
}
header.masthead {
margin-bottom: 50px;
background: no-repeat center center;
background-color: #868e96;
background-attachment: scroll;
position: relative;
background-size: cover;
}
header.masthead .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #212529;
opacity: 0.5;
}
header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
padding: 200px 0 150px;
color: white;
}
@media only screen and (min-width: 768px) {
header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
padding: 200px 0;
}
}
header.masthead .page-heading,
header.masthead .site-heading {
text-align: center;
}
header.masthead .page-heading h1,
header.masthead .site-heading h1 {
font-size: 50px;
margin-top: 0;
}
答案 0 :(得分:0)
修复
#mainNav.is-fixed {
/* when the user scrolls down, we hide the header right above the viewport */
position: fixed;
top: -137px;
transition: transform 0.2s;
border-bottom: 1px solid white;
background-color: rgba(255, 255, 255, 0.9);
}