I've been staring into my screen for to many hours, without getting anywhere, why I hope some of you may know how to solve my issue. When on smaller screen size (mobile devices), the navigation bar doesn't expand correctly. Maybe I did modify to much within the "ul" "li", I'm not sure.
When clicking on the nav-button, it does change from "collapse" to "collapse show".
HTML:
<!-- Nav -->
<nav id="navbar" data-toggle="sticky-onscroll"> <a href="https://biogenity.com"><img alt="Biogenity" title="Home" src="#" style="max-width: 9em;"></a>
<button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span > </span> </button>
<p style="margin-top: 1em; margin-left: 2em;"><i style="margin-right: 10px;"></i> 45 71116050 <!--<i style="margin-left: 20px; margin-right: 10px;"></i> [email protected]></p>
<!-- Nav Menu -->
<div id="navbarSupportedContent" style="width: 600px important!">
<ul style="font-size: 1.2em; text-align: right">
<li ><a href="/proteomics"><span>Proteomics</span> <i ></i></a>
<ul >
<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 ><a href="/metabolomics"><span>Metabolomics</span> <i ></i></a>
<ul>
<li><a href="#">Cell</a></li>
</ul>
</li>
<li ><a href="/transcriptomics"><span>Transcriptomics</span> <i ></i></a>
<ul>
<li><a href="#">Phosphoproteomics</a></li>
</ul>
</li>
<li><a href="/multi-omics">Multi-omics</a></li>
<li><a href="#team">About</a></li>
<li style="padding-right: 30px;"><a href="#contact">Contact</a></li>
</ul>
<i ></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;
}
}
Thanks.
CodePudding user response：
@media (max-width: 991px) {
.navbar-collapse > ul {
display: block;
}
}Put this css in main.css in line 435.
CodePudding user response：
On clicking the hamburger menu "show" class is added to ul element but the style remain same for ul element as display none, add the CSS to show the hidden element on clicking menu icon, Try with below CSS
@media(max-width:991px)
{
.collapse.show ul {
display:block
}
}