'How do I add my html navbar into another html file in django

I am still very new to Django and I want to add the HTML for a navigation bar and its respective CSS into my base HTML file. Here is what I did up till now:

in app/base.html:

{% extends "BritIntlSchl/navbar.html" %}
{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>page title</title>
    <link href="{% static 'appname\stylebase.css' %}" rel="stylesheet"> 
    <link href="{% static 'appname\navbarstyles.css'}" rel="stylesheet" %}">  
    {% block head-content %}{% endblock head-content %}
</head>
    {% block nav%}{% endblock nav %}
    {% block content1 %}{% endblock content1 %}
</body>
</html>

and in app/navbar.html:

{% block nav%}    
<div class="wrap">...</div>
{% endblock nav%}

I am pretty much lost here. I am sure that putting{% block nav%} around the nav bar does nothing. How do you suggest I go about this?

I'm using Django 2.1.

Solution 1:^[1]

When one uses the extend template tag one cannot have any HTML outside any block as then there would be the confusion of where to put this HTML (In fact the template engine would completely ignore that HTML). So when you extend /navbar.html at most you can fill the block named nav which you are overriding and filling with nothing. What you want to do is to use the include template tag to include the navbar into base.html:

base.html:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>page title</title>
    <link href="{% static 'appname\stylebase.css' %}" rel="stylesheet"> 
    <link href="{% static 'appname\navbarstyles.css'}" rel="stylesheet" %}">  
    {% block head-content %}{% endblock head-content %}
</head>
    {% block nav %}{% include 'app/navbar.html' %}{% endblock nav %}
    {% block content1 %}{% endblock content1 %}
</body>
</html>

Note: We put the {% block nav %} there not because navbar.html would fill it but because some page extending base.html might want a custom navbar.

navbar.html:

<div class="wrap">...</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'How do I add my html navbar into another html file in django

Solution 1:[1]

base.html:

navbar.html:

Sources

Related Questions

Solution 1:^[1]