Currently I am developing a bootstrap website using the "Butterfly" template. Everything is functioning properly except for the navbar when viewed on mobile devices. The dropdown menu fails to open on mobile devices, and I suspect it might be related to the PHP include tag being used to easily update the navbar across all pages of the site.
<?php include_once("template/menu.html"); ?>
Here is the code snippet for the navbar:
<!--Mobile version of header-->
<ul class="toggle">
<li><a href="../index.php">Home</a></li>
<li><span style="cursor:pointer">
<div class="dropdown">
<a class="dropdown-toggle disabled" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Properties
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Link 3<span class="label label-success label-as-badge">0 New</span></a></li>
<li><a href="#">Link 2<span class="label label-success label-as-badge">3 New</span></a></li>
<li><a href="#">Link 3<span class="label label-success label-as-badge">Nothing here</span></a></li>
</ul>
</div></span>
</li>
<li><a href="#work_outer">Links</a></li>
<li><a href="#Portfolio">About</a></li>
<li><a href="#client_outer">Apply</a></li>
</ul>
Below is the CSS styling for the navbar:
.nav-right{
float:right;
}
.nav ul{
list-style:none;
padding:0px;
}
.nav ul.toggle{
display:none;
visibility:hidden;
height:0px;
overflow:hidden;
margin-bottom: 0;
}
.nav ul li{
display:inline-block;
margin:0 23px;
}
.nav ul li:first-child{
/*margin:0px;*/
}
.nav ul li:last-child{
margin:0 0 0 23px;
}
.nav ul li a{
display:block;
font-size:14px;
color:#222222;
font-family:'Dosis';
text-decoration:none;
text-transform:uppercase;
font-weight: 600;
transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
}
.nav ul li a:hover{
color:#49b5e7;
}
Additional CSS styles for the dropdown menu are as follows:
.dropdown {
position: relative;
}
<!-- Rest of the CSS properties go here -->
If you require more details or assistance with this issue, feel free to ask. Appreciate any help provided. Thanks!