Having trouble creating a navbar with a dropdown menu on the right? I encountered an issue where the menu doesn't show up when clicked. However, after removing all CSS styles, the button starts working.
.info {
margin-top: 15%;
display: table;
height: 100%;
width: 100%;
}
#navbar {
background: red;
position: fixed;
top: 0px;
width: 100%;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
font-size: 12px;
}
h1 {
color: rgb(255, 255, 255);
border: 3px solid #fff;
text-align: center;
background: rgba(0, 0, 0, 0.1);
font-size: 40px;
font-weight: normal;
padding: 30px;
margin: 15px;
display: inline-block;
background: rgba(0, 0, 0, 0.4);
}
/* Menu */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(87, 41, 41);
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 25px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
.conc {
float: right;
}
html,
body {
height: 100%;
}
body {
background: url(../img/main_learn.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
input[type=range] {
margin: 10px;
width: 50px;
}<div id="navbar">
<ul>
<li><a href="index.php?idp=glowna">Strona główna</a></li>
<li><a href="index.php?idp=aktualnosci">Aktualności</a></li>
<li><a href="index.php?idp=instrumenty">Instrumenty</a></li>
<li><a href="index.php?idp=musicale">Musicale</a></li>
<li><a href="index.php?idp=nauka">Nauka</a></li>
<li><a href="index.php?idp=chart">Charty</a></li>
<li><a href="index.php?idp=filmy">Filmy</a></li>
<li><a href="index.php?idp=chaos">Chaos</a></li>
<li class="conc">
<div class="dropdown show">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- <a href="index.php?idp=kontakt"><b>Kontakt</b></a> -->
</li>
</ul>
</div>Experiencing issues even after trying to comment out individual styles like overflow: hidden, etc.? The dropdown button used is from Bootstrap documentation and Popper.js has been included.