After running the code below, I noticed that my navbar is not behaving as expected and seems to be stuck in the middle of the screen instead of being fixed to the top. This is confusing for me because I have created navbars before that worked fine. Any assistance on fixing this issue would be greatly appreciated!
<body>
<div class="container-fluid">
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<div class="navbar-nav align-items-center">
<a class="navbar-brand bigbrand" href="{% url 'post_list' %}">My Tech blog</a>
<a class="nav-item nav-link" href="{% url 'about' %}">About</a>
<a class="nav-item nav-link" href="https://www.github.com">Github</a>
<a class="nav-item nav-link" href="https://www.linkedin.com">LinkedIn</a>
</div>
<div class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<a class="nav-item nav-link" href="{% url 'post_new' %}">New Post</a>
<a class="nav-item nav-link" href="{% url 'post_draft_list' %}">Drafts</a>
<a class="nav-item nav-link" href="{% url 'logout' %}">Log out</a>
<a >Welcome: {{ user.username }}</a>
{% else %}
<a class="nav-item nav-link" href="{% url 'login' %}" aria-label="Login">
<span class="fa fa-user" aria-hidden="true"></span></a>
{% endif %}
</div>
</div>
</nav>
</div>
{# The actual blog posts#}
<div class="content container-fluid">
<div class="col-md-8">
<div class="blog_posts">
{% block content %}
{% endblock %}
</div>
</div>
</div>
{# SCRIPTS#}
<script type="text/javascript" src="{% static 'js/blog.js' %}"></script>
</body>
</html>
This is an image showing the output: