switch control navbar feature in Django

I am currently working on a project and I am attempting to manage the color change of the navbar logo. After visiting the "about" page on my application, I want the navbar to change color, with half of it turning yellow to better complement the purple background.

This project is developed using Django and I have included my navbar in the base template using the standard template tag {% include 'navbar.html' %}, and then extended it to the "about" page using {% extends 'base.html' %}, following the usual Django template inheritance.

However, I am struggling to figure out how to control the navbar logo. Is there a way for me to achieve this? And if so, how can I limit the navbar changes to just one template?

htmlcssdjangotwitter-bootstrap

Answer №1

If you want to easily customize the logo in your website, one way to do it is by including the logo in a separate block and then overriding it wherever needed.

base.html:

{% block navbar %}
   ...
   <div class='logo'></div>
   ...
{% endblock navbar %}

about.html:

{% block navbar %}
   ...
   <div class='logo red'></div>
   ...
{% endblock navbar %}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The boundary of embedded components

I am looking for CSS code that will allow me to arrange all elements with specific indents, such as placing the first element on the left side of the page, followed by an image with some indentation, and so on. <div class="container-fluid"> &l ...

htmlcss

Is there a way to open a particular Bootstrap tab within a modal using a URL?

I am seeking a way to automatically open a specific tab within a modal using its URL. To achieve this, I have included the following JavaScript code at the end of my website. By entering website.com/#modal-6 in the browser, it will open with modal-6 activa ...

javascripthtmltwitter-bootstrapbootstrap-5

Transform text that represents a numerical value in any base into an actual number

Looking to convert a base36 string back to a double value. The original double is 0.3128540377812142. When converting it to base 36: (0.3128540377812142).toString(36); The results are : Chrome: 0.b9ginb6s73gd1bfel7npv0wwmi Firefox: 0.b9ginb6s73e Now, h ...

javascriptjqueryajaxhtml

Menu rollout problem when clicking or hovering

I'm facing challenges in making my menu content appear when a user clicks or hovers over the hamburger menu. My app is built using Angular, and I've written some inline JavaScript and CSS to achieve this, but the results are not as expected. Here ...

javascripthtmlcssangularjs

Seamless animated loading gif as a looping background visual

Is there a way to find a GIF that can be used as a repeated background on an HTML element, creating the illusion of a seamless block? https://i.sstatic.net/5BKxW.gif (source: opengraphicdesign.com) I am looking for an 80x80 GIF that can be repeated as ...

cssanimated-gif

Angular 4 incorporating a customized Bootstrap 4 accordion menu for seamless navigation

I am trying to implement a nested menu using a JSON object in Angular 4. Below is the code I have written. <div id="panel-group"> <div class="panel panel-default" *ngFor="let mainItem of objectKeys(my_menu); let i = index"> <div class ...

htmlangularbootstrap-4angular5angular2-routing

Difficulty adapting CSS using JavaScript

I am looking to adjust the padding of my header to give it a sleeker appearance on the page. I attempted to achieve this with the code below, but it seems to have no effect: function openPage() { var i, el = document.getElementById('headbar' ...

javascripthtmlcssdom

How can I show the content of a variable in Next.js without displaying any HTML tags?

For instance, I have the description variable set up like this in NextJS: description={storeDetail?.translation?.description} When outputting the description, it shows me <p>Tenis</p>. However, I would prefer to display just "Tenis" without th ...

htmlnext.js

Alter the color scheme of a paragraph using PHP

I have been working on creating a management panel for a website. My first step was to include an input field to collect a color value: <form> <input type="text" name="test"> <input type="submit" value="Send"> <?php $color = $_REQ ...

phphtmlcss

Having Trouble with Form Submission Button Across Different Web Browsers

Having some trouble with my form - all fields are properly closed with tags, but when I click the submit button, nothing happens. The page is loaded with code, so here's the link for you to check it out. Unfortunately, right-click is disabled, so ple ...

phpjavascripthtml

What are the methods for integrating a JavaScript framework in a Rails application without utilizing any gems?

I am seeking guidance on integrating frameworks such as angularjs, polymer js, bootstrap, etc., into a Rails application without relying on corresponding gems. The reason for this approach is that the availability of gems may change and some projects may ...

ruby-on-railsangularjstwitter-bootstrap

Is placing JavaScript on the lowest layer the best approach?

I'm facing a unique situation that I haven't encountered before and am unsure of how to address it. My website has a fixed top header and footer. On the left side, there is a Google Adsense ad in JavaScript. When scrolling down, the top header s ...

javascripthtmlc#-4.0asp.net-mvc-4adsense

Hyperlinks are malfunctioning and the text cannot be highlighted

Here is my XML code: <!DOCTYPE HTML SYSTEM> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"></link> </head> <body> <div class="header"> <img id="circle" src="circle.png" ...

htmlcss

PHP page Not Refreshing Properly Without Ajax

I am in need of assistance. Could someone please provide me with a code that has been thoroughly reviewed and tested for errors to address my issue? The program, 22.php, consists of a form. The desired functionality is for the user to enter information and ...

javascriptphpjqueryhtmlajax

Creating dynamic images in JavaScript by assigning URL paths from string variables

Currently, I am utilizing JavaScript to parse through an XML file. One interesting aspect of the XML is that it contains URLs which link to images like this one: http://localhost/pic.jpg Throughout the parsing process, I am storing each URL as a string va ...

javascripthtmlxml

What could be causing my Docx converter to produce 'None' as an output?

As a newcomer to web development, I am currently working on a language translation app in Django that is designed to translate uploaded documents. The process involves converting between pdf and docx formats. However, when the translated document is genera ...

pythondjangopdfms-wordpywin32

Trouble with HTML and CSS design layout

I'm struggling to create a responsive design for my webpage. The layout should consist of black blocks that display images. Ensuring the layout adapts to different screen sizes is proving challenging. It needs to maintain its shape on smaller screens ...

htmlcsslayoutresponsive-design

Attempting to extract only the text content from a specific div using XPath

I am currently facing a challenge in writing a script to extract the title element from a poorly coded webpage. The developer who created this website did not use any classes, only div elements. Below is a snippet of the source code I am trying to scrape: ...

phphtmlregexxpath

Is there a way to display the form values on the table once it has been submitted?

I'm struggling with my form input not showing up under the table headings after submission. I've reviewed the code multiple times, but can't figure out what's causing the issue. If you have any suggestions on how to write the code more ...

javascripthtmljquerycss

HTML SVG text elements styled with varying background shades

Looking to enhance an image by adding multiple labels with distinct background colors: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <svg version="1. ...

htmlsvgsvg-animatesvg-filters