I have encountered a problem with my website's responsiveness. While the bootstrap and CSS work perfectly on desktop browsers, there are two issues when accessing the site from a mobile device. Firstly, the navbar does not extend to the full width of the hamburger toggle and image, regardless of resizing the image. Secondly, when the hamburger dropdown menu opens, it overlays on the page contents instead of pushing them down. This could be acceptable, but I would like to correct the width of the navbar at least.
Any assistance in resolving this issue would be greatly appreciated.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="<css file>" >
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark sticky-top" >
<a class="navbar-brand" href="/"> <img src="{% static "br_email/logo.png" %}" id = "logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/"><b>Home</b><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/events/"><b>Events</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact/"><b>Contact</b></a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="/profile/"> <b>Profile</b></a>
<a class="nav-item nav-link" href="/logout/"> <b>Logout</b></a>
</span>
</ul>
</div>
</nav>
<main role="main" >
{% block content %}{% endblock %}
</main>
<div class="content"></div>
<footer class="footer">
<div class="row d-flex align-items-center">
<!--<!– Grid column –>-->
<div class="col-12 pt-4">
<!--<!–Copyright–>-->
<p class="text-center">
© 2020
•
<a href="/contact/" >
<strong> Contact </strong>
</a>
</p>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd8d928d8d988fd3978ebdccd3cccbd3cd">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script type="text/javascript">// <![CDATA[
function loading(){
$("#loading").show();
$("#content").hide();
}
// ]]>
</script>
<script>
$(document).ready(function(){
if ($(document).height() > $(window).height()) {
$('#footer').css('position', 'relative');
}
});
</script>
<script>
$(function(){
$('a').each(function(){
if ($(this).prop('href') == window.location.href) {
$(this).addClass('active'); $(this).parents('li').addClass('active');
}
});
});
</script>
</body>
</html>
Navbar related CSS
.navbar-fixed-top {height: 40x;}
.navbar-brand img {height: 40px;}
.navbar-dark{
background-color: #1a2125;
}
.site-header .navbar-nav .nav-link {
color: #cbd5db;
}
.site-header .navbar-nav .nav-link:hover {
color: #ffffff;
}
.site-header .navbar-nav .nav-link.active {
font-weight: 500;
}