我的导航项未显示在大屏幕上，但在移动设备上却按预期显示。任何人都可以帮助我解决问题。我怀疑它与 clip-path 属性有关，但是我尝试使用它但没有任何乐趣。我希望导航项显示在大屏幕上，就像它在移动设备上显示的那样。<nav class="navBar"> <div class="navbrand"> <a href="#" class="logo">XandY Junior School</a> </div> <div class="hamburger-btn"> <div class="hamburger-btn_burger"></div> </div> <ul class="navList"> <li class="navItem"> <a href="#" class="navLink"></a> </li> <li class="navItem"> <a href="story.html" class="navLink">Our Story</a> </li> <li class="navItem"> <a href="#" class="navLink">Sports & Clubs</a> </li> <li class="navItem"> <a href="#" class="navLink">Admissions</a> </li> <li class="navItem"> <a href="#" class="navLink">Parents</a> </li> <li class="navItem"> <a href="#" class="navLink">BOSA</a> </li> <li class="navItem"> <a href="#" class="navLink">Contact Us</a> </li> <li class="socialContact"> <a href="#" class="socialLink"><i class="fab fa-facebook-f socialFB"></i></a> <a href="#" class="socialLink"><i class="fab fa-twitter socialTwitter"></i></a> <a href="#" class="socialLink"><i class="fab fa-instagram socialInsta"></i></a> </li> </ul></nav>
3 回答
千巷猫影
TA贡献1829条经验 获得超7个赞
它不会按照“bootstrap”在大屏幕上显示，因为在大屏幕上使用 display:none css class 不显示导航栏。
所以我会建议你不要使用 bootstrap 的导航栏，你可以使用 html - css 轻松地做到这一点。
至尊宝的传说
TA贡献1789条经验 获得超10个赞
$(document).ready(function(){
$(".hamburger-btn").click(function(){
$(".navList").toggle();
});
});
body{
margin: 0;
padding: 0;
}
.navbrand {
display: block;
background: darkgreen;
padding: 10px;
}
.logo {
padding: 10px;
color: #fff;
text-decoration: none;
}
.hamburger-btn {
position: absolute;
top: -50px;
right: -3px;
background: darkgreen;
width: 150px;
height: 150px;
border-radius: 150px;
}
.hamburger-btn_burger {
width: 30px;
height: 4px;
background: #fff;
display: block;
position: absolute;
bottom: 77px;
right: 60px;
}
.hamburger-btn_burger::before{
position: absolute;
content: "";
width: 30px;
height: 4px;
background: #fff;
top: -8px;
z-index: 9;
}
.hamburger-btn_burger::after{
position: absolute;
content: "";
width: 30px;
height: 4px;
background: #fff;
bottom: -8px;
z-index: 9;
}
.navList{
display: none;
background: darkgreen;
padding: 15px;
position: absolute;
top: 22px;
width: 100%;
z-index: 1;
}
.navList li{list-style: none;display: block;}
.navList li a{display: block; color: #fff; text-decoration: none; padding: 10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navBar">
<div class="navbrand">
<a href="#" class="logo">XandY Junior School</a>
</div>
<div class="hamburger-btn">
<div class="hamburger-btn_burger"></div>
</div>
<ul class="navList">
<li class="navItem">
<a href="#" class="navLink">About Us</a>
</li>
<li class="navItem">
<a href="story.html" class="navLink">Our Story</a>
</li>
<li class="navItem">
<a href="#" class="navLink">Sports & Clubs</a>
</li>
<li class="navItem">
<a href="#" class="navLink">Admissions</a>
</li>
<li class="navItem">
<a href="#" class="navLink">Parents</a>
</li>
<li class="navItem">
<a href="#" class="navLink">BOSA</a>
</li>
<li class="navItem">
<a href="#" class="navLink">Contact Us</a>
</li>
<li class="socialContact">
<a href="#" class="socialLink"><i class="fab fa-facebook-f socialFB"></i></a>
<a href="#" class="socialLink"><i class="fab fa-twitter socialTwitter"></i></a>
<a href="#" class="socialLink"><i class="fab fa-instagram socialInsta"></i></a>
</li>
</ul>
</nav>
你能看看这段代码吗...
吃鸡游戏
TA贡献1829条经验 获得超7个赞
你是正确的剪辑路径是一个问题。但背景也是一个问题，因为当删除剪辑路径时它与现有内容重叠
我能够使用下面的 css 看到您的“navlist”项目。评论了background, clip-path & Padding
.navList {
position: absolute;
/* background: #003300; */
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
/* clip-path: circle(100px at 90% -10%); */
/* -webkit-clip-path: circle(100px at 90% -10%); */
transition: all 1s ease-out;
pointer-events: none;
/* padding-top: 9em; */
}
虽然，当我使用开发工具时，我也无法在移动模式下看到导航栏。
添加回答
举报
0/150
提交
取消