I recently implemented a drop-down menu on the top navigation of my website. However, after applying Bootstrap to one of my pages, the drop-down menu stopped functioning properly.
Below is the code that was applied:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0904041f181f190a1b2b5e45584559">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce9f2eff2ee">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
Bootstrap implementation in the body section:
<div class="topnav" id="myTopnav">
<div class="topnav-left">
<a href="/"><img src="Img/Signature-Black.png"></a>
</div>
<a href="./contact.html">Contact</a>
<a href="./about.html"> About</a>
<div class="dropdown">
<button class="dropbtn">Blog <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
</div>
<a href="./photos.html">Photos</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
External CSS code for the navigation bar:
.topnav {
overflow: hidden;
background-color: transparent;
z-index: 100;
align-items: center;
top: 0;
left: 0;
width: 100%;
padding: 30px 10%;
}
.topnav a {
float: right;
color: black;
text-align: center;
padding: 10px 20px;
text-decoration: none;
font-size: 18px;
font-weight: 500;
margin-right: 35px;
transition: 1s;
}
/* More CSS code here */
While I am not very experienced with using Bootstrap, I am hopeful that there is a simple solution to retain the design applied to the navigation links without having to remove Bootstrap altogether. I would greatly appreciate any advice or suggestions on how to resolve this issue. Thank you!
After testing other pages, I have narrowed down the problem to the interaction between Bootstrap and the drop-down menu. Removing Bootstrap enables the drop-down menu to work correctly, however, it disrupts the layout of other elements on the page.