首頁猿問大屏幕上不顯示導航項

大屏幕上不顯示導航項

JavaScript

慕工程0101907 2023-04-14 15:04:14

我的導航項未顯示在大屏幕上，但在移動設備上卻按預期顯示。任何人都可以幫助我解決問題。我懷疑它與 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 輕松地做到這一點。

反對回復 2023-04-14

至尊寶的傳說

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;}

<a href="#" class="logo">XandY Junior School</a>

</div>

</div>

<a href="#" class="navLink">About Us</a>

</li>

<a href="story.html" class="navLink">Our Story</a>

</li>

<a href="#" class="navLink">Sports & Clubs</a>

</li>

<a href="#" class="navLink">Admissions</a>

</li>

<a href="#" class="navLink">Parents</a>

</li>

</li>

<a href="#" class="navLink">Contact Us</a>

</li>

</li>

</ul>

</nav>

你能看看這段代碼嗎...

反對回復 2023-04-14

吃雞游戲

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; */

}

雖然，當我使用開發工具時，我也無法在移動模式下看到導航欄。

反對回復 2023-04-14

3 回答
0 關注
164 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

大屏幕上不顯示導航項

大屏幕上不顯示導航項

3 回答

添加回答