Navbar Styling + Logo using Bootstrap5 & Django
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
main1/templates/main1/index.html --> main1 is the name of my Django app --> class="navbar navbar-expand-lg navbar-light bg-light"> class="navbar-brand" href="#">Navbar class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> class="navbar-toggler-icon"> class="collapse navbar-collapse" id="navbarNavAltMarkup"> class="navbar-nav"> class="nav-item nav-link active" href="#">Home class="sr-only">(current) class="nav-item nav-link" href="#">Features class="nav-item nav-link" href="#">Pricing class="nav-item nav-link disabled" href="#">Disabled class="title1">Navbar Tutorial
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. Login + Registration Page in Django using HTML, CSS, JavaScript (Part II) – (How to serve static files) 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
main1/templates/main1/index.html --> 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"> href="" rel="stylesheet"> class="navbar navbar-expand-lg navbar-light bg-light"> class="navbar-brand" href="#">Navbar class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> class="navbar-toggler-icon"> class="collapse navbar-collapse" id="navbarNavAltMarkup"> class="navbar-nav"> class="nav-item nav-link active" href="#">Home class="sr-only">(current) class="nav-item nav-link" href="#">Features class="nav-item nav-link" href="#">Pricing class="nav-item nav-link disabled" href="#">Disabled class="title1">Navbar Tutorial
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
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"> href="" rel="stylesheet"> class="navbar navbar-expand-lg"> class="navbar-brand" href="#">Navbar class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> class="navbar-toggler-icon"> class="collapse navbar-collapse" id="navbarNavAltMarkup"> class="navbar-nav"> class="nav-item nav-link active" href="#">Home class="sr-only">(current) class="nav-item nav-link" href="#">Features class="nav-item nav-link" href="#">Pricing class="nav-item nav-link disabled" href="#">Disabled class="title1">Navbar Tutorial 
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
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"> href="" rel="stylesheet"> class="navbar navbar-expand-lg"> class="navbar-brand" href="#"> class="logo" src="" alt=""> class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> class="navbar-toggler-icon"> class="collapse navbar-collapse" id="navbarNavAltMarkup"> class="navbar-nav"> class="nav-item nav-link active" href="#">Home class="sr-only">(current) class="nav-item nav-link" href="#">Features class="nav-item nav-link" href="#">Pricing class="nav-item nav-link disabled" href="#">Disabled class="title1">Navbar Tutorial 
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: Twitter Login/Registration Page with HTML,CSS,& JS Series — PART I Login/Registration Page with HTML,CSS,& JS Series — PART II Django 3..2..1..Takeoff Book Personal Website
Create Modern Navigation Bar with logo using HTML, CSS, and Bootstrap
We have seen navigation bars or top navbars in almost every website and the navbar is one of the basic things which makes the website attractive and more user-friendly (easily navigatable). The navigation bar can be of different types and different styles.
What is Navigation Bar?
The navigation bar is a UI element in the website which contains links to other sections of the same website or another website. In maximum websites, the navigation bar is displayed on almost every page of the website but this can differ. In most websites, the navigation bar is mostly displayed as a horizontal list of links (link to different parts of the website) at the top of every page styled in such a way that it perfectly fits into the website design. The navigation bar contains the website logo and other navigation options and a search bar too. In this tutorial, we will learn how to create a simple Horizontal Navigation Bar for any website in few simple steps by just using HTML, CSS, and some Bootstrap.
Although in most of the cases the navigation bar is placed horizontally at the starting of the webpage(on top), in some cases, a horizontal navigation bar may not fit the website design, so in this type of case, we create a vertical navigation bar on the left side or right side of the website. This type of vertical navigation bar is also called a sidebar, as it appears on the side of the main content. Some websites have both a horizontal navigation bar at the top and a vertical navigation bar on the left or right side of each website. Many other websites use a horizontal navigation bar for desktop view and a vertical navigation bar for the mobile view of their websites. Download Source Code: Click Here Watch Video Tutorial: Click HereTop comments (3)
My name is Kemmy Mary, IT graduate (Bsc),ICT-Teacher,competent web developer-fullStack and beginner Mobile App developer. Friendly,focused, hardworking, very flexible and a fast learner.
The beauty of bootstrap is it already contains all you need for a responsive Web design,styling and the animation needed.
I like it cos one get to use less cumbersome styling with css and a long JS, it make web dev and coding more neater and faster.
Beside Boostrap has JS and Css as it background codes.
Nice work.. Using Burger-kind of Navbar. Really nice. Good work.
3 likes Like Comment button