Important things to know before getting started:
- Utilizing Django (python)
- Implementing Bootstrap
- Additionally, using html and css
Steps taken (in sequence leading up to encountering an error):
- Copied the navbar template from the bootstrap navbar documentation
- Linked my own custom css and js files from the static directory of Django in the following order below:
Javascript Files
(Copied from Bootstrap, comments preserved) :)<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="{% static '/js/script.js' %}" type="text/javascript"></script>
<script
src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfddd0d0cbcccbcddecfff8a918f918f92dddacbde8d">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"
></script>
Css Files
<link rel="stylesheet" href="{% static 'css/styles.css'%}" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414617a647a64793631203566">[email protected]</a>/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
Code in main html file
{%load static%}
<!DOCTYPE html>
...
Code in custom Css file
@media screen and (max-width: 767px) {
.nav-icon {
height: auto;
width: auto;
max-height: 40px;
max-width: 140px;
}
}
...
Here is the final result with an animated gif demonstrating the issue of the dropdown not sliding when clicked: