My navbar had been working fine, until I tinkered with trying to change my navbar to fixed and now it's not working. Not sure what I did wrong, but none of my links are showing up at all. I removed the code I had originally put so it should be working now but it's not. I also tried doing the special reload, forgot what it's called, to get rid of an old cached file, but still not working. Only thing that shows up is my logo on my nav bar, that's it.
base.html/navbar
{% load bootstrap4 %}
{% load static %}
{% load unread_messages_counter %}
<!-- Navbar is located in this file -->
<!doctype html>
<html lang="en">
<head>
{% block head %}
<title>Base</title>
{% endblock %}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="{% static 'css/style.css' %}"/>
<link rel="stylesheet" href="{% static 'css/notification.css' %}" type="text/css" class = "notification"/>
<style>
<!-- Add this tag -->
{% block styles %}
{% endblock %}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-expand-md">
<div class="container-fluid">
<a class= 'navbar-brand' href="{% url 'dating_app:home' %}"><img src="{% static 'images/cupids_corner_logo.jpg' %}"><h5 style="color:red"></h5> </a>
<button class= "navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" >
<ul class ="navbar-nav ml-auto" >
{% if user.is_authenticated %}
{% unread_messages request.user as user_unread_messages %}
{% if user_unread_messages > 0 %}
<li class="nav-item" >
<a class= "notification" style="color:brown" href="{% url 'dating_app:conversations' user.id %}" type="text/css" >
<span>Inbox</span>
<span class="badge">{% unread_messages request.user %}</span>
</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:conversations' user.id %}">
<span>Inbox</span>
</a>
</li>
{% endif %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:view_matches' user.id %}">Matches</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:mingle' %}">Mingle</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:profile' user.id %}">My Profile</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:logout' %}">log out</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:login' %}">login</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:register' %}">register</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
style.css
.navbar-nav li{
padding-left:35px;
padding-right:10px;
margin-top: -20px;
margin-bottom: -20px;
color:yellow;
width: 100%;
}
/* Modify the backgorund color */
.navbar-custom {
background-color: #ffffff;
border: 2px solid pink
}
.jumbotron{
background-image: url("/static/images/jumbo.jpg");
background-size: cover;
min-height: 350px
}
.notification {
text-decoration: none;
padding:50;
position: relative;
display: inline-block;
}
.notification .badge {
position: absolute;
top: -15px;
right: -10px;
padding: 5px 5px;
border-radius: 40%;
background-color: red;
color: white;
}
.social a{
font-size: 4.5em;
padding: 3rem;
}
.fa-facebook{
color: #3b5998;
}
.fa-twitter{
color:#00aced;
}
.fa-goggle-plus-g{
color:#dd4b39;
}
.fa-instagram{
color:#517fa4;
}
.fa-youtube{
color:#bb0000;
}
.fa-facebook:hover,
.fa-twitter:hover,
.fa-instagram:hover,
.fa-instagram:hover,
.fa-youtube:hover{
color: #d5d5d5;
}
footer {
padding-top:3.5rem;
color:blue;
background-color: #ffffff
}
hr.light{
border-top:1px solid red;
width:75%;
margin-top: .8rem;
margin-bottom:1rem;
}
hr.light-100{
border-top:1px solid #;
width:100%;
margin-top: .8rem;
margin-bottom:1rem;
}
body{
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
font-family: arial;
box-sizing: border-box;
}
.card-container{
width: 300px;
height: 430px;
background: #FFF;
border-radius: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0px 1px 10px 1px #000;
overflow: hidden;
display: inline-block;
}
.upper-container{
height: 150px;
background: #7F00FF;
}
.image-container{
background: white;
width: 80px;
height: 80px;
border-radius: 50%;
padding: 5px;
transform: translate(100px,100px);
}
.image-container img{
width: 80px;
height: 80px;
border-radius: 50%;
}
.lower-container{
height: 280px;
background: #FFF;
padding: 20px;
padding-top: 40px;
text-align: center;
}
.lower-container h3, h4{
box-sizing: border-box;
line-height: .6;
font-weight: lighter;
}
.lower-container h4{
color: #7F00FF;
opacity: .6;
font-weight: bold;
}
.lower-container p{
font-size: 16px;
color: gray;
margin-bottom: 30px;
}
.lower-container .btn{
padding: 12px 20px;
background: #7F00FF;
border: none;
color: white;
border-radius: 30px;
font-size: 12px;
text-decoration: none;
font-weight: bold;
transition: all .3s ease-in;
}
.lower-container .btn:hover{
background: transparent;
color: #7F00FF;
border: 2px solid #7F00FF;
}
Maybe instead of .navbar-nav li, try .navbar-nav li a in your css
Related
The top part of my website (with the logo and navbar) is slightly wider than the body (which is made up of 2 css columns).
How do I make the top and body both the same size?
Also, I recently had the opposite problem, with the body being wider, but by making the body regular, it left the top too wide.
My base html:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-175481126-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-175481126-1');
</script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font-family: Tahoma, Geneva, sans-serif;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
color: white;
text-decoration:none;
}
/* for buttons*/
.paging {
background-color: #333;
border: none;
color: white;
padding: 8px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
}
button:hover {
background-color: #111;
}
.register {
float: right;
}
.paging {
background-color: #333;
border: none;
color: white;
padding: 8px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
}
button:hover {
background-color: #111;
}
/* title */
.title {
color: black;
padding: 10px;
text-align: center;
font-size: 40px;
font-family: Tahoma, Geneva, sans-serif;
Color: black;
text-decoration: none;
}
/* descriptions */
.description {
color: black;
padding: 15px;
font-family: Tahoma, Geneva, sans-serif;
text-align: left;
font-size: 13px;
}
/* embedd url */
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
margin-left: auto; /* Automatic margin from left */
margin-right: auto; /* Automatic margin from right */
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
/* make columns */
* {
box-sizing: border-box;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 0 0 100%;
max-width: 100%;
/* you can just remove these margins all together. Just wanted to emphasize that there should be no margin left or right, to avoid overflow */
margin-left: 0px;
margin-right: 0px;
}
.videos, .ads {
flex-grow: 0; flex-shrink: 0;
}
.ads {
display: block;
float: right;
background-color: #c1c4c9;
width: 25%;
}
.videos {
display: block;
float: left;
width: 75%;
padding-right: 10%;
padding-left: 10%;
}
.image {
padding-right: 5%;
padding-left: 5%;
padding-top: 5%;
padding-bottom: 5%;
}
.logo {
flex-direction:; row;
flex:; 0 0 100%;
max-width 100%;
justify-content:; center;
}
.banner {
/* float: left;*/
width: 100%;
height: 5%;
background-color: red;
color: white;
text-align: center;
}
img {
max-width: 100%;
max-height: 100%;
}
/* header */
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
font-family: Tahoma, Geneva, sans-serif;
}
</style>
<html>
{% load static %}
<link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico' %}"/>
<div class="logo">
<div class="header">
<a href="/">
<img src="https://i.ibb.co/5Rqps7F/logo-black.png" alt="Computer Man">
</a>
</div>
<ul>
<li class="all">All videos</li>
<li class="stam">Stam videos</li>
<li class="music">Music videos</li>
<li class="news">News videos</li>
<li class="contact">Contact</li>
<li class="register">Login/Register</li>
</ul>
<div class="banner">
<text align="center">We are still developing our site, so we may not be able to update videos as often as we want</text>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
The page html:
{% include 'base.html' %}
<style>
.{{ category }} {
background-color: grey;
}
</style>
<div class="row">
<div class="videos">
{% autoescape off %}
<h1 class="title"> {{ video_.title }} </h1>
{% ifnotequal video_.tag 'none' %}
<small align = left> {{ video_.tag }} </small>
{% endifnotequal %}
<div class="iframe-container"><p align="center"> {{ video_.url }}</p></div>
<div class="description"> {{ video_.description }} </div>
<hr/>
{% endautoescape %}
</div>
<div class="ads">
{% for ad in ad_item %}
{% ifequal ad.redirect 'False' %}
<img class="image" src="{{ ad.pic }}"></img>
{% endifequal %}
{% ifnotequal ad.redirect 'False' %}
<img class="image" src="{{ ad.pic }}"></img>
{% endifnotequal %}
{% endfor %}
</div>
</div>
Try adding margin: 0px. Since you are using Bootstrap you can just add class m-0 where you need it.
<div class="row m-0">
<div class="videos m-0">
{% autoescape off %}
<h1 class="title"> {{ video_.title }} </h1>
{% ifnotequal video_.tag 'none' %}
<small align = left> {{ video_.tag }} </small>
{% endifnotequal %}
<div class="iframe-container"><p align="center"> {{ video_.url }}</p></div>
<div class="description"> {{ video_.description }} </div>
<hr/>
{% endautoescape %}
</div>
<div class="ads m-0">
{% for ad in ad_item %}
{% ifequal ad.redirect 'False' %}
<img class="image" src="{{ ad.pic }}"></img>
{% endifequal %}
{% ifnotequal ad.redirect 'False' %}
<img class="image" src="{{ ad.pic }}"></img>
{% endifnotequal %}
{% endfor %}
</div>
</div>
I have a topbar that works well on all page, and I'm trying to add a sidebar as well, but the style of the topbar is applied to the sidebar instead of using the rest of the code.
How can I isolate topbar css style code portion from the sidebar style css code portion?
index.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">
<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">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/static/css/styles.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<title>
{% block title %} {% endblock title %}
</title>
</head>
<body>
<!-- Topbar code start -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{{ url_for('routes.dashboard') }}">Dashboard</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
{% if current_user.is_authenticated %}
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('routes.portfolio_data_entry') }}">Portfolio Data Entry</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('routes.portfolio_data_entry_dashboard') }}">Portfolio Data Entry Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('routes.stock') }}">Stock</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('routes.account_page') }}">Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('routes.logout') }}">Log Out</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{{ url_for('routes.login') }}">Home</a>
</li>
{% endif %}
</ul>
</div>
</nav>
<!-- Topbar code end -->
<!-- Sidebar code start end -->
<nav class="navbar navbar-expand d-flex flex-column align-item-start" id="sidebar">
<a href="#" class="navbar-brand text-light mt-5">
<div class="display-5 font-weight-bold">THANOS</div>
</a>
<ul class="navbar-nav d-flex flex-column mt-5 w-100">
<li class="nav-item w-100">
Home
</li>
<li class="nav-item w-100">
About
</li>
<li class="nav-item w-100">
Blog
</li>
<li class="nav-item dropdown w-100">
Service
<ul class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
<li>Service 01</li>
<li>Service 02</li>
<li>Service 03</li>
</ul>
</li>
<li class="nav-item w-100">
Contact
</li>
</ul>
</nav>
<section class="p-4 my-container">
<button class="btn my-4" id="menu-btn">Toggle Sidebar</button>
<h1>Sidebar Navigation</h1>
<p class="text-dark">Lorem ipsum</p>
<p class="text-dark">Lorem ipsum</p>
</section>
<!-- custom js start -->
<script>
var menu_btn = document.querySelector("#menu-btn")
var sidebar = document.querySelector("#sidebar")
var container = document.querySelector(".my-container")
menu_btn.addEventListener("click", () => {
sidebar.classList.toggle("active-nav")
container.classList.toggle("active-cont")
})
</script>
<!-- custom js start -->
<!-- Sidebar code end -->
<!-- Body block container format start -->
<div class="container">
{% block body %}
{% endblock body %}
</div>
<!-- Body block container format end -->
<!-- Javascript start -->
<script src="/static/js/base.js"></script>
<!-- Javascript start -->
</body>
</html>
And this is the styles css file that starts with the topbar, then the sidebar is there too, this is where I got stuck in isolating the two from each other.
styles.css
.send-button {
background: #54C7C3;
width: 100%;
font-weight: 600;
color: #fff;
padding: 8px 25px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.g-button {
color: #fff !important;
border: 1px solid #EA4335;
background: #ea4335 !important;
width: 100%;
font-weight: 600;
color: #fff;
padding: 8px 25px;
}
.my-input {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
cursor: text;
padding: 8px 10px;
transition: border .1s linear;
}
.header-title {
margin: 5rem 0;
}
h1 {
font-size: 31px;
line-height: 40px;
font-weight: 600;
color: #4c5357;
}
h2 {
color: #5e8396;
font-size: 21px;
line-height: 32px;
font-weight: 400;
}
.login-or {
position: relative;
color: #aaa;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.span-or {
display: block;
position: absolute;
left: 50%;
top: -2px;
margin-left: -25px;
background-color: #fff;
width: 50px;
text-align: center;
}
.hr-or {
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
#media screen and (max-width: 480px) {
h1 {
font-size: 26px;
}
h2 {
font-size: 20px;
}
}
.container .form-1 {
width: 25rem;
text-align: center;
margin: 3rem 0 0 22rem;
}
/* Sidebar section */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: #fff;
}
.navbar {
width: 250px;
height: 100vh;
position: fixed;
margin-left: -300px;
background-color: #7952b3;
transition: 0.4s;
}
.nav-link {
font-size: 1.25em;
}
.nav-link:active,
.nav-link:focus,
.nav-link:hover {
background-color: #ffffff26;
}
.dropdown-menu {
background-color: #7952b3;
}
.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item:hover {
background-color: #ffffff26;
}
.my-container {
transition: 0.4s;
}
/* for navbar */
.active-nav {
margin-left: 0;
}
/* for main section */
.active-cont {
margin-left: 250px;
}
#menu-btn {
background-color: #7952b3;
color: #fff;
}
#menu-btn:focus {
box-shadow: 0 0 0 0.25rem #7952b344;
}
I am having an issue where my nav items are not displaying. While not visible, the register and logout nav are 'clickable', and it's invisible but when I hover over it I can click on it and it takes me to register and conversely I can click to logout after I register and am logged in. None of my other nav items are showing up even invisibly for me to click on. There should be register and login nav item displayed for users who haven't logged in, and then a number of nav items after a user logs in.
As you can see in my snippet, when you hover over to the right, there is a link that you can click on, but is invisible. Also as I said, it should be 2 links when user isn't logged in yet.
.navbar-nav li a {
padding-left: 35px;
padding-right: 10px;
margin-top: -20px;
margin-bottom: -20px;
color: yellow;
position: fixed;
width: 100%;
}
/* Modify the backgorund color */
.navbar-custom {
background-color: #ffffff;
border: 2px solid pink
}
.jumbotron {
background-image: url("/static/images/jumbo.jpg");
background-size: cover;
min-height: 350px
}
.notification {
text-decoration: none;
padding: 50;
position: relative;
display: inline-block;
}
.notification .badge {
position: absolute;
top: -15px;
right: -10px;
padding: 5px 5px;
border-radius: 40%;
background-color: red;
color: white;
}
.social a {
font-size: 4.5em;
padding: 3rem;
}
.fa-facebook {
color: #3b5998;
}
.fa-twitter {
color: #00aced;
}
.fa-goggle-plus-g {
color: #dd4b39;
}
.fa-instagram {
color: #517fa4;
}
.fa-youtube {
color: #bb0000;
}
.fa-facebook:hover,
.fa-twitter:hover,
.fa-instagram:hover,
.fa-instagram:hover,
.fa-youtube:hover {
color: #d5d5d5;
}
footer {
padding-top: 3.5rem;
color: blue;
background-color: #ffffff
}
hr.light {
border-top: 1px solid red;
width: 75%;
margin-top: .8rem;
margin-bottom: 1rem;
}
hr.light-100 {
border-top: 1px solid #;
width: 100%;
margin-top: .8rem;
margin-bottom: 1rem;
}
body {
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
font-family: arial;
box-sizing: border-box;
}
.card-container {
width: 300px;
height: 430px;
background: #FFF;
border-radius: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 1px 10px 1px #000;
overflow: hidden;
display: inline-block;
}
.upper-container {
height: 150px;
background: #7F00FF;
}
.image-container {
background: white;
width: 80px;
height: 80px;
border-radius: 50%;
padding: 5px;
transform: translate(100px, 100px);
}
.image-container img {
width: 80px;
height: 80px;
border-radius: 50%;
}
.lower-container {
height: 280px;
background: #FFF;
padding: 20px;
padding-top: 40px;
text-align: center;
}
.lower-container h3,
h4 {
box-sizing: border-box;
line-height: .6;
font-weight: lighter;
}
.lower-container h4 {
color: #7F00FF;
opacity: .6;
font-weight: bold;
}
.lower-container p {
font-size: 16px;
color: gray;
margin-bottom: 30px;
}
.lower-container .btn {
padding: 12px 20px;
background: #7F00FF;
border: none;
color: white;
border-radius: 30px;
font-size: 12px;
text-decoration: none;
font-weight: bold;
transition: all .3s ease-in;
}
.lower-container .btn:hover {
background: transparent;
color: #7F00FF;
border: 2px solid #7F00FF;
}
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="{% static 'css/style.css' %}" />
<link rel="stylesheet" href="{% static 'css/notification.css' %}" type="text/css" class="notification" />
<style>
<!-- Add this tag --> {
% block styles %
}
{
% endblock %
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-expand-md">
<div class="container-fluid">
<a class='navbar-brand' href="{% url 'dating_app:home' %}"><img src="{% static 'images/cupids_corner_logo.jpg' %}">
<h5 style="color:red"></h5>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %} {% unread_messages request.user as user_unread_messages %} {% if user_unread_messages > 0 %}
<li class="nav-item">
<a class="notification" style="color:brown" href="{% url 'dating_app:conversations' user.id %}" type="text/css">
<span>Inbox</span>
<span class="badge">{% unread_messages request.user %}</span>
</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:conversations' user.id %}">
<span>Inbox</span>
</a>
</li>
{% endif %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:view_matches' user.id %}">Matches</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:mingle' %}">Mingle</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:profile' user.id %}">My Profile</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:logout' %}">log out</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:login' %}">login</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:register' %}">register</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<!-- HEADER END -->
<!--Below is individual page will html will be rendered -->
<hr class="my-4">
<!--Connect -->
<div class="container-fluid padding">
<div class="row text-center padding">
<div class="col-12">
<h2>Connect</h2>
</div>
<div class="col-12 social padding">
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>
<!-- FOOTER AREA BEGINS BELOW-->
<footer>
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<img src="{% static 'images/cupids_corner_logo.jpg' %}">
<hr class="light">
<p>703-309-9572</p>
<p>rezazandirz#gmail.com</p>
<p>100 Street Name</p>
<p>City, State, 000</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our hours</h5>
<hr class="light">
<p>Monday: 9am-5pm</p>
<p>Saturday: 10am-4pm</p>
<p>Sunday: closed(like Chick-fil-A)</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our satellite offices</h5>
<hr class="light">
<p>City, State, 00000</p>
<p>City, State, 00000</p>
<p>City, State, 00000</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>©CupidsCorner.com</h5>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
You did 2 mistakes -
You did not set the background color for the hamburger.
You did not set id in here <div class="collapse navbar-collapse" id="????" >
Code below-
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="{% static 'css/style.css' %}"/>
<link rel="stylesheet" href="{% static 'css/notification.css' %}" type="text/css" class = "notification"/>
<style>
<!-- Add this tag -->
{% block styles %}
{% endblock %}
.navbar-nav li a{
padding-left:35px;
padding-right:10px;
margin-top: -20px;
margin-bottom: -20px;
color:yellow;
position: fixed;
width: 100%;
}
/* Modify the backgorund color */
.navbar-custom {
background-color: #ffffff;
border: 2px solid pink
}
.jumbotron{
background-image: url("/static/images/jumbo.jpg");
background-size: cover;
min-height: 350px
}
.notification {
text-decoration: none;
padding:50;
position: relative;
display: inline-block;
}
.notification .badge {
position: absolute;
top: -15px;
right: -10px;
padding: 5px 5px;
border-radius: 40%;
background-color: red;
color: white;
}
.social a{
font-size: 4.5em;
padding: 3rem;
}
.fa-facebook{
color: #3b5998;
}
.fa-twitter{
color:#00aced;
}
.fa-goggle-plus-g{
color:#dd4b39;
}
.fa-instagram{
color:#517fa4;
}
.fa-youtube{
color:#bb0000;
}
.fa-facebook:hover,
.fa-twitter:hover,
.fa-instagram:hover,
.fa-instagram:hover,
.fa-youtube:hover{
color: #d5d5d5;
}
footer {
padding-top:3.5rem;
color:blue;
background-color: #ffffff
}
hr.light{
border-top:1px solid red;
width:75%;
margin-top: .8rem;
margin-bottom:1rem;
}
hr.light-100{
border-top:1px solid #;
width:100%;
margin-top: .8rem;
margin-bottom:1rem;
}
body{
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
font-family: arial;
box-sizing: border-box;
}
.card-container{
width: 300px;
height: 430px;
background: #FFF;
border-radius: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0px 1px 10px 1px #000;
overflow: hidden;
display: inline-block;
}
.upper-container{
height: 150px;
background: #7F00FF;
}
.image-container{
background: white;
width: 80px;
height: 80px;
border-radius: 50%;
padding: 5px;
transform: translate(100px,100px);
}
.image-container img{
width: 80px;
height: 80px;
border-radius: 50%;
}
.lower-container{
height: 280px;
background: #FFF;
padding: 20px;
padding-top: 40px;
text-align: center;
}
.lower-container h3, h4{
box-sizing: border-box;
line-height: .6;
font-weight: lighter;
}
.lower-container h4{
color: #7F00FF;
opacity: .6;
font-weight: bold;
}
.lower-container p{
font-size: 16px;
color: gray;
margin-bottom: 30px;
}
.lower-container .btn{
padding: 12px 20px;
background: #7F00FF;
border: none;
color: white;
border-radius: 30px;
font-size: 12px;
text-decoration: none;
font-weight: bold;
transition: all .3s ease-in;
}
.lower-container .btn:hover{
background: transparent;
color: #7F00FF;
border: 2px solid #7F00FF;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class= 'navbar-brand' href="{% url 'dating_app:home' %}"><img src="{% static 'images/cupids_corner_logo.jpg' %}"><h5 style="color:red"></h5> </a>
<button class= "navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive" >
<ul class ="navbar-nav ml-auto" >
{% if user.is_authenticated %}
{% unread_messages request.user as user_unread_messages %}
{% if user_unread_messages > 0 %}
<li class="nav-item" >
<a class= "notification" style="color:brown" href="{% url 'dating_app:conversations' user.id %}" type="text/css" >
<span>Inbox</span>
<span class="badge">{% unread_messages request.user %}</span>
</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:conversations' user.id %}">
<span>Inbox</span>
</a>
</li>
{% endif %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:view_matches' user.id %}">Matches</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:mingle' %}">Mingle</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:profile' user.id %}">My Profile</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:logout' %}">log out</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:login' %}">login</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:register' %}">register</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<!-- HEADER END -->
<!--Below is individual page will html will be rendered -->
<hr class="my-4">
<!--Connect -->
<div class="container-fluid padding">
<div class="row text-center padding">
<div class="col-12">
<h2>Connect</h2>
</div>
<div class="col-12 social padding">
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>
<!-- FOOTER AREA BEGINS BELOW-->
<footer>
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<img src="{% static 'images/cupids_corner_logo.jpg' %}">
<hr class="light">
<p>703-309-9572</p>
<p>rezazandirz#gmail.com</p>
<p>100 Street Name</p>
<p>City, State, 000</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our hours</h5>
<hr class="light">
<p>Monday: 9am-5pm</p>
<p>Saturday: 10am-4pm</p>
<p>Sunday: closed(like Chick-fil-A)</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our satellite offices</h5>
<hr class="light">
<p>City, State, 00000</p>
<p>City, State, 00000</p>
<p>City, State, 00000</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>©CupidsCorner.com</h5>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
So I'm trying to add social media icons to the footer of my web application. I was able to do it in a separate HTML file but when I tried it in my Django app I'm not able to make the icons look the way I want it. Seems like my css for the icon isn't working and showing. I deleted the css for the icon and it was the same. Not sure what I'm doing wrong
body {
background: #fafafa;
color: #333333;
margin-top: 5rem;
}
h1, h2, h3, h4, h5, h6 {
color: #444444;
}
ul {
margin: 0;
}
.bg-steel {
background-color: #5f788a;
}
.site-header .navbar-nav .nav-link {
color: #cbd5db;
}
.site-header .navbar-nav .nav-link:hover {
color: #ffffff;
}
.site-header .navbar-nav .nav-link.active {
font-weight: 500;
}
.content-section {
background: #ffffff;
padding: 10px 20px;
border: 1px solid #dddddd;
border-radius: 3px;
margin-bottom: 20px;
}
.article-title {
color: #444444;
}
a.article-title:hover {
color: #428bca;
text-decoration: none;
}
.article-content {
white-space: pre-line;
}
.article-img {
height: 65px;
width: 65px;
margin-right: 16px;
}
.article-metadata {
padding-bottom: 1px;
margin-bottom: 4px;
border-bottom: 1px solid #e3e3e3
}
.article-metadata a:hover {
color: #333;
text-decoration: none;
}
.article-svg {
width: 25px;
height: 25px;
vertical-align: middle;
}
.account-img {
height: 125px;
width: 125px;
margin-right: 20px;
margin-bottom: 16px;
}
.account-heading {
font-size: 2.5rem;
}
.fa {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
}
/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}
/* Set a specific color for each brand */
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-instagram {
background: #f09433;
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
color: white;
}
.fa-linkedin {
background:royalblue;
color: white;
}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}">
{% if title %}
<title>Django Blog - {{ title }}</title>
{% else %}
<title>Django Blog</title>
{% endif %}
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="{% url 'blog-home' %}">WOOF</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="{% url 'blog-home' %}">Home</a>
<a class="nav-item nav-link" href="{% url 'blog-about' %}">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
{% if user.is_authenticated %}
<a class="nav-item nav-link" href="{% url 'post-create' %}">+ New Post </a>
<a class="nav-item nav-link" href="{% url 'profile' %}">Profile</a>
<a class="nav-item nav-link" href="{% url 'logout' %}">Logout</a>
{% else %}
<a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
<a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container " id="content">
<div class="row">
<div class="col-md-8">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section bg-dark">
<h3 class= text-white>Woof</h3>
<p class='text-light'>Blog responsibly
<ul class="list-group">
<li class="list-group-item list-group-item-light" > Latest Posts </li>
<li class="list-group-item list-group-item-light"> Announcements </li>
</ul>
</p>
</div>
</div>
</div>
<footer>
<div class="row bg-dark mt-5">
<div class="col-6 text-center text-info mt-3">
<p> Made by #Bryan & Ismail</p>
<p>WOOF</p>
</div>
<div class="col-6 text-center ">
</div>
</footer>
</main>
</body>
</html>
I can't understand totally what you want but you may use !important tag. So you give priority.
.fa-instagram {
background: red !important;
}
Since you say that the CSS you wrote does not get applied, first of all you should check if it gets imported at all.
Try the next steps to debug it:
Try to find why if the file containing the CSS is imported.
If the file is imported, but int the Browser's Styles tab, the rules applied do not appear, try clearing your cache.
If it is imported, see if all of the rules are ignored, or just some of them. If just one of them, try to use "!important". It is not the best practice, but it will get you the desired result, and if you don't use it too much it is ok.
If it IS NOT imported, then you should import it.
I've tried it on my local machine, and it works, the CSS rules are applied successfully. So, my guess is that you file is not imported at all, or it is just a cache issue. Try from an incognito tab.
Here is the app that I have developed:
http://azeribocorp.pythonanywhere.com/index/
When I click on Search in the menu, the navbar shifts down, I cannot find where the problem is. I want the menu to be always fix on the top of the page. Any help is appreciated.
__base.html:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
{% block meta_tags %}{% endblock meta_tags%}
<title>
{% block title %}Azeribo Tracking{% endblock title %}
</title>
{% block stylesheets %} {% endblock %}
{% block javascript %} {% endblock javascript %}
{% block extra_head %} {% endblock %}
</head>
<body>
<header class="topnavbar">
{% include 'aztracker/_topnavbar.html' %}
</header>
<div id="main" role="main">
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div> {# /#main #}
<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
</body>
</html>
_topnavbar.html
{% load static %}
{% load staticfiles %}
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
<link rel="script" type="text/css" href="{% static 'css/_topnavbar.js' %}">
</head>
<!--Top Navigation-->
<nav role="navigation" class="nav">
<ul class="nav-items">
<li class="nav-item">
<span>Home</span>
</li>
<li class="nav-item ">
<span>Track Container</span>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">Product #1</li>
<li class="submenu-item">Product #2</li>
<li class="submenu-item">Product #3</li>
</ul>
</nav>
</li>
<li class="nav-item">
<span>Search</span>
</li>
<li class="nav-item">
<span>Report</span>
</li>
<li class="nav-item dropdown">
<span>More</span>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">About</li>
<li class="submenu-item">Contact</li>
<li class="submenu-item"><hr class="submenu-seperator" /></li>
<li class="submenu-item">Support</li>
<li class="submenu-item">FAQs</li>
</ul>
</nav>
</li>
</ul>
</nav>
search_form.html
{% extends 'aztracker/__base.html' %}
{% load staticfiles %}
{% load static %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{% static 'css/search_form.css' %}">
{% endblock %}
{% block content %}
{% block main_col %}
<body>
<section class="search_section">
<form method="POST" action="/search/">
{% csrf_token %}
<input type="text" placeholder="What are you looking for?" name="search_input_field" id="search_input">
<button id="search_btn">Search</button>
</form>
</section>
</body>
{% endblock main_col %}
{% endblock content %}
_topnavbar.css
* {border:1px black solid;}
.topnavbar {
background-color: rgba(0,100,150,0.6);/*rgba(0,255,150,0.6);/*#3EDC99*/
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #3498db;
}
.nav {
width: 550px;
margin: 0 auto 0 auto;
text-align: center;
}
/* Navigation */
.nav {
font-family: Verdana, Georgia, Arial, sans-serif;
font-size: 14px;
}
.nav-items {
padding: 0;
list-style: none;
}
/* color of menu links
span {
color:yellow;
}
*/
.nav-item {
display: inline-block;
margin-right: 25px;
}
.nav-item:last-child {
margin-right: 0;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active,
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
display: block;
position: relative;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
outline: none;
color:#fff;
}
.nav-link ,
.nav-link:link,
.nav-link:visited,
.nav-link:active {
color: #fff;
font-weight: bold;
}
.nav-link::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: rgba(0,0,0,0.2);
opacity: 0;
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-link:hover::before,
.nav-link:hover::before {
opacity: 1;
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
.dropdown {
position: relative;
}
.dropdown .nav-link {
padding-right: 15px;
height: 17px;
line-height: 17px;
}
.dropdown .nav-link::after {
content: "";
position:absolute;
top: 6px;
right: 0;
border: 5px solid transparent;
border-top-color: #fff; /*small triangle showing drop down menu*/
}
.submenu {
position: absolute;
top: 100%;
left: 50%;
z-index: 100;
width: 200px;
margin-left: -100px;
background: #fff;
border-radius: 3px;
line-height: 1.46667;
margin-top: -5px;
box-shadow: 0 0 8px rgba(0,0,0,.3);
opacity:0;
-webkit-transform: translate(0, 0) scale(.85);
transform: translate(0, 0)scale(.85);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.submenu::after,
.submenu::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
height: 0;
}
.submenu::after {
border-bottom-color: #fff;
}
.submenu::before {
margin-left: -13px;
border: 13px solid transparent;
border-bottom-color: rgba(0,0,0,.1);
-webkit-filter:blur(1px);
filter:blur(1px);
}
.submenu-items {
list-style: none;
padding: 10px 0;
}
.submenu-item {
display: block;
text-align: left;
}
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
color: #3498db;
padding: 10px 20px;
}
.submenu-link:hover {
text-decoration: underline;
}
.submenu-seperator {
height: 0;
margin: 12px 10px;
border-top: 1px solid #eee;
}
.show-submenu .submenu {
opacity: 1;
-webkit-transform: translate(0, 25px) scale(1);
transform: translate(0, 25px) scale(1);
pointer-events: auto;
}
.submenu-link{
color:red;
}
search_form.css
* {border:1px black solid;}
It seems you have a rouge Unicode character in you html.
Inspecting the page source after you click "search" reveals the Unicode character as . this character is 'ZERO WIDTH NO-BREAK SPACE'.
It will not be seen in you text editor since it parses the characters.
You can try to open your code in Notepad or some texteditor that does not understand Unicode and try to remove it from there.
It is also worth pointing out that your content is displayed in your tag
Foud out about the character from RHSeeger's answer here
Hope this helps!
You are breaking your HTML at some point, I can see some problems in the construction of your templates.
first:
you are including a head tag inside your body tag (_topnavbar.html)
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
<link rel="script" type="text/css" href="{% static 'css/_topnavbar.js' %}">
</head>
This should be inside the "extra_head" block, like this (_topnavbar.html):
{% block extra_head %}
<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
<link rel="script" type="text/css" href="{% static 'css/_topnavbar.js' %}">
{% endblock %}
Second:
you are adding an extra body tag inside your body tag (search_form.html):
{% block content %}
{% block main_col %}
<body>
<section class="search_section">
<form method="POST" action="/search/">
{% csrf_token %}
<input type="text" placeholder="What are you looking for?" name="search_input_field" id="search_input">
<button id="search_btn">Search</button>
</form>
</section>
</body>
{% endblock main_col %}
{% endblock content %}
You must delete that body tag.
third:
you are adding a script in a wrong way (_topnavbar.html):
<link rel="script" type="text/css" href="{% static 'css/_topnavbar.js' %}">
you can add it this way:
<script src="{% static 'css/_topnavbar.js' %}" charset="utf-8"></script>
maybe you have more errors, you should review your code line by line and find all the other problems.
I hope this answer works for you, have a good day.
On all children pages (including search), try adding this to your CSS:
body {
margin: auto;
}