balt1794
Posted on March 15, 2021
When creating a website, some of the most common elements needed are navbars and images. A navbar lets people navigate to the different pages of the website and a logo is very important since it can give people an idea of what the website is all about.
In order to create a logo for a website, it's important to look up the dimensions needed depending on where the logo will be used. You can display a logo virtually anywhere in a website, but most of the time the dimensions of the logo need to be adjusted accordingly.
A good size for a logo for a website is 250 px (width) x 150 px (height), but then again you might need to change the dimensions depending where you want to display it.
There are some assumptions that I will make before continuing with this tutorial.
I assume that you have already created a simple Django web app and started working on the HTML templates of the website. If this is not the case, you can refer to these posts.
Chapter 1 - Django Setup - (How to create a Django web app)
Chapter 2 - Django Basics - (Optional)
Chapter 3 - Homepage - (How to create a homepage and get started with HTML templates in Django)
If you're up to speed and already have the templates where you want to add the navbar and logo, carry on reading.
I'm going to use one of the navbar templates provided by Bootstrap, but you can use any navbar template or create your own if you prefer.
Let's take the HTML code shown below for the navbar and add it to the homepage template. In my case, the homepage template is called index.html and it's an empty HTML template.
Index.html
<!-- path=> main1/templates/main1/index.html -->
<!-- path=> main1 is the name of my Django app -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<h1 class="title1">Navbar Tutorial</h1>
<!-- baltlogs.com -->
In the terminal window, issue the command python manage.py runserver and go to http://127.0.0.1:8000
The navbar looks crude right now. Let’s style it a little bit before adding a logo.
Create a static folder in the directory of your project, inside that folder create a folder called css and inside that folder create a CSS file called homepage.css
If you know how to serve static files, you can skip the tutorial below.
If you want to know how to serve static files including CSS files, please check out the following tutorial before moving on.
Let’s open the newly created CSS file (homepage.css) and add the following code.
Homepage.css
/* path => static/css/homepage.css */
.navbar{
background-color: #F6F5D7;
margin:0%;
padding: 0%;
border: 1px solid rgb(0, 0, 0);
}
.title1{
font-family: 'sans-serif';
}
/* baltlogs.com */
I added a background color for the navbar and a border for it as well. Also, the heading’s font is sans-serif now. You can style the navbar as much as you want.
Open index.html and add the following code. The code will import Bootstrap to take care of some styling and we will also import homepage.css
Index.html
<!-- path=> main1/templates/main1/index.html -->
{% load static %}
<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- CSS Custom File -->
<link href="{% static 'css/homepage.css' %}" rel="stylesheet">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<h1 class="title1">Navbar Tutorial</h1>
<!-- baltlogs.com -->
In the code above:
– The first line of the code shows the load static tag needed to import static files.
-The first link tag imports the Bootstrap CSS package.
This import can be found here: Bootstrap
It’s the first one in the image below.
Since I will only use the CSS package, I only import that one. Feel free to import the JavaScript package if you plan to use it.
-The second link tag imports the custom CSS file (homepage.css) that we just created. This file would add some styling of our own.
Save changes and issue python manage.py runserver in the terminal window.
The website should look like the image below.
This is an improvement compared to what we had. The heading has changed to the new font. There is a black line underneath the navbar which is the border. However, there is a change that didn’t take place. We still see a white background for the navbar even though we added a different background color in the homepage.css file.
The reason for this is that the Bootstrap code is overriding the code from the CSS file.
Open the HTML file and remove the following code from the navbar element.
Remove navbar-light and bg-light.
Index.html
{% load static %}
<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- CSS Custom File -->
<link href="{% static 'css/homepage.css' %}" rel="stylesheet">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<h1 class="title1">Navbar Tutorial</h1>
After you remove those words from the navbar, you'll see that the navbar adopts the color we have in homepage.css.
Let’s add the logo to the HTML template.
Open index.html one more time and add the following code.
Index.html
{% load static %}
<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- CSS Custom File -->
<link href="{% static 'css/homepage.css' %}" rel="stylesheet">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#"><img class="logo" src="{% static 'media/logo.png' %}" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<h1 class="title1">Navbar Tutorial</h1>
I have only edited the second line of the navbar element to add the image file which will be the logo of the website.
This is how the path to the logo file looks like.
% static ‘media/logo.png’ %
Save the file and create this path, so that Django can find the logo.
Inside the static folder created earlier, create a media folder and put the logo inside that folder. Name your image as logo and add the right extension, in my case, .png. Of course you can change the naming of files, so feel free to do it, but remember to also change the path in the HTML file so that the logo can be found.
Issue python manage.py runserver in the terminal window and take a look at the website.
My logo is way too big. It is 300px(width) x 175px(height). I will adjust its size in the homepage.css file.
Open homepage.css. If you have a logo which is also too big for the navbar, start playing around with the dimensions.
Homepage.css
/* path => static/css/homepage.css */
.navbar{
background-color: #F6F5D7;
margin:0%;
padding: 0%;
border: 1px solid rgb(0, 0, 0);
}
.title1{
font-family: 'sans-serif';
}
.logo{
height: 50px;
width: 80px;
}
/* baltlogs.com */
Save the CSS file and run server again.
I found the right dimensions for my logo to be 80px (width) x 50px (height). The dimensions might be different depending on your logo and where on the website you are trying to display it.
You can style the logo and navbar further by adding other CSS properties such as changing the font and style of the navbar links, changing the background color for the logo, etc.
Learn more about Django:
Login/Registration Page with HTML,CSS,& JS Series - PART I
Posted on March 15, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
