0

I am new to Python, Django and Bootstrap and was wondering why the nav-brand disappears when I navigate to another page or view other than index. The nav-brand is an image source in my case and below is the following code for my base.html:

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light p-md-3">
        <div class="container-fluid">
            <a class="navbar-brand" href="{% url 'index' %}">
                <img src="static/images/logo150x63_2_2DP.png" alt="">
            </a>
            <button class="navbar-toggler" 
                    type="button" 
                    data-bs-toggle="collapse" 
                    data-bs-target="#navbarText" 
                    aria-controls="navbarText" 
                    aria-expanded="false" 
                    aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
             </button>

      <div class="collapse navbar-collapse" id="navbarText">
          <div class="mx-auto">

          </div>
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="{% url 'index' %}">Home</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="{% url 'basic_portfolio:uniprojects' %}">University Projects</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="{% url 'basic_portfolio:contact' %}">Contact</a>
              </li>
          </ul>
      </div>
    </div>
  </nav>
{% block content %}

{% endblock %}

The following is my views.py file:

from django.shortcuts import render

def index(request):
    return render(request, 'basic_portfolio/index.html')

def uniprojects(request):
    return render(request, 'basic_portfolio/uniprojects.html')

def contact(request):
    return render(request, 'basic_portfolio/contact.html')

My project urls.py file:

from django.contrib import admin
from django.urls import path, include
from basic_portfolio import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index, name='index'),
    path('projects/', include('basic_portfolio.urls')),
]

My app urls.py file:

from django.urls import path, include
from basic_portfolio import views

app_name = 'basic_portfolio'

urlpatterns = [
    path('university_projects/', views.uniprojects, name='uniprojects'),
    path('contact/', views.contact, name='contact'),
]
Abdul Khan
  • 3
  • 2

1 Answers1

1

Your image is using a URL that is relative to the current page. When you navigate to another page it can't be found because the path has changed.

You either need to give the image an absolute URL or, make it relative to the site root by adding a preceding "/".

<img src="/static/images/logo150x63_2_2DP.png" alt="">

Here is a good answer explaining the differences

Arleigh Hix
  • 9,990
  • 1
  • 14
  • 31