Having trouble with loading the bootstrap navigation bar in Django? Here's a possible solution you might not have

Question

Having trouble with loading the bootstrap navigation bar in Django? Here's a possible solution you might not have

I'm having an issue with my navigation bar on the home page. The three lines in the navbar do not click, open, or display any links. I believe I need to include some JavaScript code to make this functionality work. Here is a screenshot of the problem: https://i.sstatic.net/vnv8H.png

When those three lines are clicked, they should expand and show the available links. Here is an example of what it should look like: https://i.sstatic.net/6YJnQ.png

Despite researching on Stack Overflow and trying various methods like loading Bootstrap CDN, saving and linking JavaScript files, none of them seem to fix the issue. The CSS files load correctly, but it seems that there might be a problem with how the JavaScript is being handled.

Below is a snippet of the HTML file where the issue arises:

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Album example for Bootstrap</title>
     <link  href="{% static 'css/album.min.css' %}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link  href="{% static 'css/album.css' %}" rel="stylesheet">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins)-->
<script href="{% static 'js/jquery.js' %}" ></script>  <!--jquery-->

<!-- <script href = "{% static 'js/collapse.js' %}"></script>

<script href = "{% static 'js/dropdown.js' %}"></script> -->

  </head>

  <body>

    ...

In addition, here is a portion from my settings file related to this problem:

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(os.path.abspath(os.path.dirname(__file__)), "static",),
)

javascript django bootstrap-4

Answer 1

Answer №1

For those using Django 2.0 and have their static settings functioning correctly, it is important to use {% load static %} instead of {% load staticfiles %}
If you need a guide, here is an example that works for static files:

project/settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]

In this setup, there is a folder named 'static' in the root of my project which contains subfolders like 'css', 'js,' etc. Make sure to configure this in your urls.py so that it can be accessed by the template. Here's how I would do it:

project/urls.py

from django.contrib import admin
from django.urls import path
from django.conf.urls.static import static        #---imports
from django.conf import settings                  #---imports

urlpatterns = [

path('', user_login),
path('admin/', admin.site.urls), 
] 

urlpatterns += staticfiles_urlpatterns()       # <------- Add this

Then, at the beginning of your HTML page, include the static files

{% load static from staticfiles %}          #<-----this

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css'%}">
<link rel="stylesheet" href="{% static 'css/style.css'%}">

Update

Don't forget to insert bootstrap.bundle.js in your static/js directory. In your base_generic.html, add the following:

<script src="{% static 'js/b.b.js' %}"></script>

Answer 2

For those using Django 2.0 and have their static settings functioning correctly, it is important to use {% load static %} instead of {% load staticfiles %}
If you need a guide, here is an example that works for static files:

project/settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]

In this setup, there is a folder named 'static' in the root of my project which contains subfolders like 'css', 'js,' etc. Make sure to configure this in your urls.py so that it can be accessed by the template. Here's how I would do it:

project/urls.py

from django.contrib import admin
from django.urls import path
from django.conf.urls.static import static        #---imports
from django.conf import settings                  #---imports

urlpatterns = [

path('', user_login),
path('admin/', admin.site.urls), 
] 

urlpatterns += staticfiles_urlpatterns()       # <------- Add this

Then, at the beginning of your HTML page, include the static files

{% load static from staticfiles %}          #<-----this

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css'%}">
<link rel="stylesheet" href="{% static 'css/style.css'%}">

Update

Don't forget to insert bootstrap.bundle.js in your static/js directory. In your base_generic.html, add the following:

<script src="{% static 'js/b.b.js' %}"></script>

Having trouble with loading the bootstrap navigation bar in Django? Here's a possible solution you might not have

Answer №1

Update

Similar questions

Having trouble reading the file using jQuery in Internet Explorer 8 and earlier versions due to its non-XML format (albeit resembling XML)

Shifting Directive Logic to a Method within a Vue Component

What is the method for determining the overall page load time of a website, taking into account the total loading time instead of just the document.ready()

Verify the level of opacity in the image

Easily integrate an HTML form as an input for your Python script

Failure of default option to appear in dropdown menu in Angular

Verification for duplicated objects in the database is conducted when a user attempts to insert a new object

Arrange pictures and div elements in a horizontal layout

How can JavaScript/jQuery be used to update LocalStorage Objects when editing a form?

Combining strings in Django using unicode characters

Incorporating React's dynamic DIV layout algorithm to generate a nested box view design

AngularJS Banner: Displaying Current Calendar Week and Increasing by 10 Days

Incorporating a Vue plugin within a different Vue plugin

Leveraging data generated by a CasperJS script within an AngularJS application

What is the best way to retrieve a specific value in an array object using JavaScript?

Steps for linking a page to a modal without embedding the page's content within the modal

There seems to be an issue with Affix functionality in Bootstrap 4 (alpha version)

Can anyone point me to the Angular-2-Release that is located on the https://code.angularjs.org

Hunt down the key within the specified array of objects and then proceed to update the value

The ng-model does not bind properly when the input value is set through JavaScript instead of directly from