I have looked in the documentation here for extends and I have also run my code through chat gpt to gain insight into the problem.
My issue is I have a navbar located in my base.html and I am using the extends tag in my home.html to bring the navbar over.
However, the website is showing {% extends 'base.html %} {% load static %} {% block content %} instead of actually showing the navbar on the page.
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="topnav">
<!-- the green text is talking about paths the white is what is on the page-->
<a href="{% url 'home' %}">Home</a>
<a href="{% url 'ingredients' %}">Ingredients</a>
<!-- name= connection-->
<a href="{% url 'menu' %}">Menu</a>
<a href="{% url 'finance' %}">Finance</a>
<a href="{% url 'purchases' %}">Purchases</a>
<a href="{% url 'menuadd' %}">Add Menu</a>
<!--utilize name in urls.py -->
<a href="{% url 'ingredientadd' %}">Add Ingredient</a>
<a href="{% url 'recipeadd' %}">Add Receipe</a>
<a href="{% url 'purchaseadd' %}">Add Purchase</a>
{# <a href="{% url 'ingredientupdate' object.pk %}">Ingredient Update</a> #}
</div>
{% block content %} {% endblock %}
</body>
</html>
home.html
{% extends 'base.html' %}
{% load static %}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
{% block content %}
<link rel="stylesheet" href="{% static 'inventory/style.css' %}">
<h1> Welcome to the Home page!</h1>
{% endblock content %}