After spending several hours attempting to troubleshoot on my own and seeking assistance from other online resources, I have been unsuccessful in resolving two key issues with my website.
The first problem lies with the bootstrap navigation menu on www.discoverbugs.org. While it appears correctly on desktop, the drop-down menu disappears when clicked on mobile. What is causing this issue and how can it be rectified?
Additionally, the header image extends across the entire width of mobile screens, creating a visually unpleasing display. Despite my efforts to set maximum and minimum widths, the images continue to present incorrectly. Could someone please assist me in editing this aspect as it currently looks quite absurd?
CSS:
@media screen and (max-width: 420px) {
header {
padding: 65px 0 0px;
}
}
Index.php
<header class="bg-primary text-white">
<div class="container text-center">
<img src="img/header-v6.jpg">
</div>
</header>
Header.php (Navigation menu)
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.php">Discover Bugs</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.php">Home</a>
</li>
<!-- Additional Menu Items -->
</ul>
</div>
</div>
</nav>
Javascript coding:
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>