我已經盯著我的螢屏看了好幾個小時，沒有得到任何結果，為什么我希望你們中的一些人知道如何解決我的問題。在較小的螢屏尺寸（移動設備）上時，導航欄無法正確展開。也許我確實在“ul”“li”中做了很多修改，我不確定。
單擊導航按鈕時，它確實從“折疊”變為“折疊顯示”。
HTML：
<!-- Nav -->
<nav id="navbar" class="navbar navbar-expand-lg top-navbar" data-toggle="sticky-onscroll"> <a class="navbar-brand" href="https://biogenity.com"><img alt="Biogenity" title="Home" src="#" class="img-fluid" style="max-width: 9em;"></a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"> </span> </button>
<p class="d-none d-sm-none d-md-none d-lg-none d-xl-block" style="margin-top: 1em; margin-left: 2em;"><i class="fas fa-1x fa-mobile-alt" style="margin-right: 10px;"></i> 45 71116050 <!--<i style="margin-left: 20px; margin-right: 10px;"></i> [email protected]></p>
<!-- Nav Menu -->
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3 ml-auto" id="navbarSupportedContent" style="width: 600px important!">
<ul class="ml-auto" style="font-size: 1.2em; text-align: right">
<li class="dropdown"><a href="/proteomics"><span>Proteomics</span> <i class="bi"></i></a>
<ul class="ul-a">
<li><a style="font-size: 0.75em; font-weight: bold; text-align: left; color: #082A40;text-decoration-thickness: 2px;">Sample types</a></li>
<li><a href="#">Cell</a></li>
<li><a href="#">Tissue</a></li>
<li><a href="#">Laser micrrodissection</a></li>
<li><a href="#">Single cell</a></li>
<li><a href="#">Extra celullar vesiclesa</a></li>
<li><a href="#">Immuno dissipation</a></li>
<li><a href="#">Secretome</a></li>
<li><a href="#">Fermentation products</a></li>
<li><a href="#">Biological fluid</a></li>
<li><a href="#">Gel bands</a></li>
<br>
<br>
<br>
<br>
<li style="border-top: 2px solid #dfdfdf;margin: 5px 20px 10px 20px;"></li>
<li><a style="font-size: 0.85em; font-weight: bold; text-align: left; color: #1DA76E;padding-bottom: 0px;">We are happy to assist</a></li>
<li style="padding-top: 0px;"><a href="#contact" title="Contact" style="font-weight:; font-size: 0.85em; text-align: left;">Contact us here.</a></li>
<li style="break-before: column;"><a style="font-size: 0.75em; font-weight: bold; text-align: left; color: #082A40;text-decoration-thickness: 2px;">Types</a></li>
<li><a href="#">Discovery</a></li>
<li><a href="#">Degradomics</a></li>
<li><a href="#">Interactomics</a></li>
<li><a href="#">Immunopeptidomics</a></li>
<br>
<li><a style="font-size: 0.75em; font-weight: bold; text-align: left; color: #082A40;text-decoration-thickness: 2px;">Post translational modifications</a></li>
<li><a href="#">Phosphoproteomics</a></li>
<li><a href="#">N-Glycan</a></li>
<li><a href="#">Acelylation</a></li>
<br>
<li><a style="font-size: 0.75em; font-weight: bold; text-align: left; color: #082A40;style="text-decoration-thickness: 2px;">Organisms</a></li>
<li><a href="#">Animals</a></li>
<li><a href="#">Fungi</a></li>
<li><a href="#">Bacteria</a></li>
<li><a href="#">Plants</a></li>
<li><a href="#">Tanycytes</a></li>
<li><a href="#">Virus</a></li>
<br>
</ul>
</li>
<li class="dropdown"><a href="/metabolomics"><span>Metabolomics</span> <i class="bi"></i></a>
<ul>
<li><a href="#">Cell</a></li>
</ul>
</li>
<li class="dropdown"><a href="/transcriptomics"><span>Transcriptomics</span> <i class="bi"></i></a>
<ul>
<li><a href="#">Phosphoproteomics</a></li>
</ul>
</li>
<li><a class="nav-link scrollto" href="/multi-omics">Multi-omics</a></li>
<li><a class="nav-link scrollto" href="#team">About</a></li>
<li style="padding-right: 30px;"><a class="nav-link scrollto" href="#contact">Contact</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i> </div>
</nav>
CSS：
.navbar li {
position: relative;
}
.navbar ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
.navbar a, .navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0px 10px 30px;
font-size: 16px;
font-weight: 500;
color: #fff;
white-space: nowrap;
transition: 0.3s;
}
.navbar a i, .navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
color: #449ED6;
}
.navbar .getstarted, .navbar .getstarted:focus {
padding: 8px 20px;
margin-left: 30px;
border-radius: 50px;
color: #fff;
font-size: 14px;
border: 2px solid #FFF;
font-weight: 600;
background-color: #0D4263;
}
.navbar .getstarted:hover, .navbar .getstarted:focus:hover {
color: #fff;
background: #1DA76E;
}
.navbar .dropdown ul {
display: block;
position: absolute;
left: 14px;
top: calc(100% 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
border-radius: 4px;
}
.navbar .dropdown ul li {
min-width: 200px;
}
.navbar .dropdown ul a {
padding: 5px 20px;
font-size: 14px;
text-transform: none;
font-weight: 500;
color: #082A40;
}
.navbar .dropdown ul a i {
font-size: 12px;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
color: #449ED6;
}
.navbar .dropdown:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navbar .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}
@media (max-width: 1366px) {
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover > ul {
left: -100%;
}
}
/**
* Mobile Navigation
*/
.mobile-nav-toggle {
color: #fff;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
.mobile-nav-toggle.bi-x {
color: #fff;
}
@media (max-width: 991px) {
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
}
.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(40, 58, 90, 0.9);
transition: 0.3s;
z-index: 999;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
border-radius: 10px;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
}
.navbar-mobile a, .navbar-mobile a:focus {
padding: 10px 20px;
font-size: 15px;
color: #082A40;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
color: #449ED6;
}
.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
margin: 15px;
color: #082A40;
}
.navbar-mobile .dropdown ul {
position: static;
display: none;
margin: 10px 20px;
padding: 10px 0;
z-index: 99;
opacity: 1;
visibility: visible;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
min-width: 200px;
}
.navbar-mobile .dropdown ul a {
padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
color: #47b2e4;
}
.navbar-mobile .dropdown > .dropdown-active {
display: block;
}
.nav-a a:hover, .nav-a .active, .nav-a .active:focus, .nav-a li:hover > a {
color: #1DA76E;
}
@media (min-width: 992px) {
.ul-a {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
}
謝謝。
uj5u.com熱心網友回復：
@media (max-width: 991px) {
.navbar-collapse > ul {
display: block;
}
}將此 css 放在 main.css 中的第 435 行。
uj5u.com熱心網友回復：
單擊漢堡選單時，“顯示”類被添加到 ul 元素，但 ul 元素的樣式保持不變，因為不顯示，添加 CSS 以在單擊選單圖示時顯示隱藏元素，請嘗試使用以下 CSS
@media(max-width:991px)
{
.collapse.show ul {
display:block
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/404700.html
標籤：
上一篇：更新狀態問題