Currently working on my first webpage with HTML, CSS, Django and maybe Javascript soon :)
My issue is that I've added some images into my main content to test all(Wanted to add a sticky nav) but the main content is somehow overlapping my NAV and i'm not able to click the links of the Nav itself anymore.
Inspector where we can see clearly the overlap.
HTML:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% static '/css/design.css' %}" />
</head>
<body>
<!--NAVBAR-->
<div class="navbar">
<div class="navbar-title">
site-name
</div>
<div class="navbar-links">
HOME
PICTURES
ALBUM
</div>
</div>
<div class="main-content">
<img src="{% static '/img/1.jpg' %}">
<img src="{% static '/img/1.jpg' %}">
<img src="{% static '/img/1.jpg' %}">
<img src="{% static '/img/1.jpg' %}">
<img src="{% static '/img/1.jpg' %}">
</div>
{% block content %}{% endblock %}
</body>
</html>
CSS:
body {
background-color: #171717;
font-family: Helvetica;
}
/*------------------NAVBAR------------------*/
.navbar, a {
color: #FFF;
text-decoration: none;
font-size: large;
margin: 10px;
}
.navbar-title {
float: left;
text-align: center;
display: block;
position: relative;
padding-left: 50px;
padding-top: 25px;
font-style: italic;
}
.navbar-links {
float: right;
text-align: center;
display: block;
position: relative;
padding-right: 50px;
padding-top: 25px;
}
/*------------------MAIN-CONTENT----------------*/
.main-content {
padding-top: 100px;
position: relative;
}
in main-content style if you remove the position: relative;
your problem will be solved
Related
Only body styling work in django, I use static files to get css. I tried even commenting out body part css, but it still works, I don't know how, I don't know why, please help! (I've used collectstatic, so it's not because of that). I've inserted static_root and url and other things in setting to, but it didn't help either.
body{
max-width: 1080px;
margin: auto;
background: #8D7D77;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
/* ----------------------------------------------NAV-BAR-UPPER------------------------------------------ */
.nav-bar{
display: flex;
flex-direction: row;
padding-top: 20px;
}
.nav-bar img{
max-width: 150px;
margin-left: 20px;
}
.nav-bar ul{
list-style: none;
display: flex;
flex-direction: row;
}
.nav-bar ul li{
margin-right: 15px;
}
.nav-bar ul a{
text-decoration: none;
color: white;
font-size: 20px;
margin-left: 80px;
padding: 10px 20px 10px 20px;
border: solid 1px;
border-radius: 10px;
}
.nav-bar ul a:hover{
text-decoration: none;
color: #8D7D77;
background-color: white;
}
.search-bar{
width: 600px;
height: 40px;
margin-top: 10px;
margin-left: 50px;
border-radius: 5px;
border-width: 1px;
border-color: #C2B280;
font-size: 110%;
}
.search-bar:focus{
border-style:none;
}
{% load static %}
<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 rel="stylesheet" href="{% static 'styles/main.css' %}" />
<link rel="icon" href="{% static 'images/logomogo.png' %}" />
<title>BookShelf</title>
</head>
<body>
{% include 'navbar.html' %}
{% block content %}
{% endblock content %}
</body>
</html>
And here's navbar
{% load static%}
<header>
<div class="nav-bar">
<a href="">
<img src="{% static 'images/logo-white.png' %}" alt="BookShelf Logo" />
</a>
<input type="search" class="search-bar" placeholder="Search">
<nav>
<ul>
<li>Login</li>
</ul>
</nav>
</div>
</header>
<div class="lower-nav-bar">
<nav>
<ul>
<li>Books</li>
<li>Reviews</li>
<li>Users</li>
<li>About</li>
</ul>
</nav>
</div>
I have tried everything mentioned on the internet but yet bootstrap CDN overrides the custom CSS file.
The HTML file:
{%extends 'movies/base.html'%}
{%block content%}
{% load static %}
<!DOCTYPE HTML>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<div class="section">
<h1>Recommend Me:</h1>
<form action="recommendation" method="post">
{% csrf_token %}
<input type="text" name="emotion" />
<button type="submit" name="button">Find</button>
</form>
<div class="video-container">
<div class="color-overlay"></div>
<video autoplay loop muted >
<source src="{% static 'movies/intro.mp4' %}" type="video/mp4">
</video>
</div>
</div>
<div class="shows">
<h2 class="mt-5">Shows you might like:</h2>
<br>
<div class="row">
{%for tvshow in tvshows%}
<div class="col-lg-5 col-md-6">
<a href="{{ tvshow.url }}">
<img src="{{ tvshow.image.url }}" class="img-fluid mb-2">
</a>
<h3>{{ tvshow.title }}</h3>
</div>
{% endfor %}
</div>
</div>
</body>
</html>
{%endblock%}
I tried adding the attribute !important in CSS but yet it didn't work.
CSS file:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins';
}
.video-container video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 570px;
object-fit: cover;
z-index: 1;
opacity: 0.8;
}
.section h1{
position: relative;
text-align: center;
font-size: 4rem;
padding: 20px;
margin: 15px;
top: 100px;
z-index: 2;
opacity: 0.6;
}
.section form{
position: relative;
text-align: center;
font-size: 4rem;
padding: 20px;
margin: 15px;
z-index: 2;
top: auto;
}
.color-overlay{
position: absolute;
top: 0;
left: 0;
background: #03a9f4;
width:100%;
height: 100%;
mix-blend-mode: overlay;
}
.shows{
position: relative;
height:400px;
top: 230px;
padding: 20px;
width:100%;
}
I also gave an ID to the body tag and then changed the CSS file, for example: #mypage .section but still it didn't work.
If I remove the bootstrap CDN link from the header file then the custom CSS file runs like a charm. I have no idea why bootstrap CDN is overriding the custom CSS file.
the HTML file extends base.html so I just wanted to say that base.html has no bootstrap stuff attached to it. It has no styling sheets.
Please help! Thank you.
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
does anybody know why there is a gap between my banner and navbar? This gap appears in Edge and Chrome, but not Firefox.
I've reduced all of the margins, that I can think of, to 0. Doing this removed the gap in Firefox but not the other browsers.
I've used Chrome and Edge's developer tools to inspect the gap and it actually falls under the .wrapper class. This is the parent of both the .navbar and .banner, so I can't figure out what is causing its meaningless existence!
What it should look like - i.e Firefox
What it looks like in Edge and Chrome
HTML:
{% load cms_tags staticfiles sekizai_tags menu_tags %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv"X-UA-Compatible" Content = "IE=Edge">
<meta name = "viewport" content="width=device-width", initial-scale=1>
<link rel="icon" href="favicon.ico">
<title>{% block title %}MyBlog Title{% endblock title %}</title>
<link href="{% static 'reset.css' %}" rel="stylesheet">
<link href="{% static 'myblog.css' %}" rel="stylesheet">
<link href="https://cdnjs.cloudfare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel = "stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700" rel="stylesheet">
<!-- MyBlog custom styles -->
<link href="{% static 'myblog.css' %}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src=https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
{% render_block "css" %}
</head>
<body>
<div class="wrapper">
<!--<div class="blog-header"></div>-->
<div class ="banner">
<h1 id="logo">Patch's Soapbox </h1>
<!--<img class = "blog-header" src="../../media/images/banner.png">-->
</div>
{% cms_toolbar %}
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<img src="{% static '#' %}"/>-->
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% show_menu 0 1 0 100 "menu.html" %}
</ul>
</div>
</div>
</nav>
<div class="container-full">
{% block content %}{% endblock content %}
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="container-full">
<p class="text-muted">{% block footer %}Patch The Bill© 2015{%endblock footer%}</p>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bu -->
<script src="{% static "ie10-viewport-bug-workaround.js" %}"></script>
{% render_block "js" %}
</body>
</html>
CSS:
html {
position : relative;
min-height: 100%;
margin: 0;
padding: 0;
height: 100%;
}
body {
/* Margin bottom by footer height */
/*margin-bottom: 60px;*/
font-family : Georgia, "Times New Roman", Times, serif;
color: #555;
width: 100%;
height: 100%;
min-height:100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height:100%;
margin-bottom:-60px;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
margin-top: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serfi;
font-weight: normal;
color: #333;
}
.footer,.push {
height:50px;
}
.footer {
position: absolute;
clear:both;
padding-bottom:0;
padding-left : 0px;
bottom: 0;
width: 100%;
min-height: 60px;
height:100%;
background-color: #f5f5f5;
}
footer.footer {
position: relative;
bottom: 0;
width: 100%;
}
.blog-header {
display: block;
width: 100%;
border-style: solid;
/*border-bottom: solid #C6C6C6*/
}
.container-full {
margin: 0 auto;
width: 100%;
padding: 0;
}
.blog-title {
margin-top: 0px;
width: 500px;
margin-bottom: 0;
font-size: 28px;
font-weight: normal;
}
.blog-description{
font-size: 20px;
color: #999;
}
.sidebar-module{
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child{
margin-bottom: 0;
}
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
.blog-post{
margin-bottom: 60px;
}
.blog-post-title{
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color : #999;
}
body > container {
padding: 0px 0px 0;
}
.container .text-muted {
margin: 0 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 0;
bottom:0;
}
.row {
margin-right: 0px!important;
}
.navbar { margin-bottom: 0;
margin-top: 0;
padding-top:0
}
.footer { margin-bottom: 0;}
.banner {background-color: green;
min-height: 120px;
padding-bottom:0
}
#logo {
position: relative;
bottom: -50px;
text-align:right;
color:white;
font-family: 'Source Sans Pro', sans-serif;
font-size: 50px
}
Use -webkit-padding-before for top padding, -webkit-padding-after for bottom padding.
(Top) - -webkit-padding-before
(Right - -webkit-padding-end
(Bottom) - -webkit-padding-after
(Left) - -webkit-padding-start
see document on browser specific hacks
https://css-tricks.com/snippets/css/browser-specific-hacks/
or maybe could try this media query:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* rules only apply in saf3+, chrome1+ */
}
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;
}