I am having trouble seeing changes made to any template that isn't base.html. I am currently trying to make changes to the homepage, but changes aren't showing in Chrome. I have the cache disabled in Chrome. This was working for me a few days ago, and I haven't made any changes to URLS or VIEWS.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", initial-scale="1">
<title>
</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/navbar.css' %}">
</head>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'images/king.png' %}" alt="King's Designs">King's Designs</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 justify-content-between" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
{% if user.is_authenticated %}
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">Hello, {{user.username}}</a>
</li>
<button type="submit" class="btn btn-success" href="{% url 'signup' %}">Sign Up</button>
</ul>
{% else %}
<ul class="navbar-nav">
<li class="nav-item">
Log In
</li>
<li class="nav-item">
<button href="{% url 'signup' %}" class="btn btn-success">Sign Up</button>
</li>
</ul>
{% endif %}
</div>
</nav>
</header>
<body>
</body>
</html>
{% extends 'base.html' %}
{% load static %}
{% block content %}
<body>
<h1>helloooooo</h1>
</body>
{% endblock content %}
Remove the body tag from the all the templates except base.html.The files should look like this
{% extends 'base.html' %}
{% load static %}
{% block content %}
<h1>helloooooo</h1>
{% endblock content %}
Your base.html file should look like this:
<html>
<head>Something
<title>Sometitle</title>
<!--Any CSS files-->
</head>
<body>
{% block content %}
{% endblock content %}
<!--Any JS files-->
</body>
</html>
Related
I have html for my website below. With the code below, I can open the hamburger menu, but it won't close. I've seen posts saying the issue is html structuring, but when I run this through a validator I get no errors. I also don't see anything that jumps out as being wrong with my use of bootstrap. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/86461d8b85.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand me-4" href="/"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>
<a class="nav-item nav-link" href="{{ url_for('description') }}">Docs</a>
<a class="nav-item nav-link" href="{{ url_for('terms') }}">Terms and Conditions</a>
{% if current_user.is_authenticated %}
<a class="nav-item nav-link" href="{{ url_for('select_game') }}">example</a>
<a class="nav-item nav-link" href="{{ url_for('redeem') }}">example</a>
<a class="nav-item nav-link" href="{{ url_for('log') }}">example</a>
<a class="nav-item nav-link" href="{{ url_for('feedback') }}">Contact Us</a>
<a class="nav-item nav-link" href="{{ url_for('acc') }}">Account</a>
<a class="nav-item nav-link" href="{{ url_for('logout') }}">Logout</a>
{% else %}
<a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>
<a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a>
{% endif %}
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav ms-auto">
{% if current_user.is_authenticated %}
<a class="nav-item nav-link" href="{{ url_for('acc') }}">Balance: ${{ account_balance }}</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
<main class="container">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}">
<p>{{ message }}</p>
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</main>
</body>
</html>
I have discovered that the problem is the first script and the seconds script are the same despite the different links. When comment out the second one on line 6, the collapse worked.
So the code below is for Django hence the blocks for the links, they work fine it's just when the screensize is too small the drop down nav doesnt drop down and if i leave it dropped down and make the screen smaller then I can't make it un drop down. Very annoying because I've got the website looking actually nice for once but it does this.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" id="logo" href="/">Company</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav" aria-label="Expand Navigation">
<div class="navbar-toggler-icon"></div>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link {% block home %}{% endblock%}" href="{% url 'index' %}">Home </a></li>
<li class="nav-item"><a class="nav-link {% block pricing %}{% endblock%}" href="{% url 'index' %}">Pricing </a></li>
<li class="nav-item"><a class="nav-link {% block how %}{% endblock%}" href="{% url 'index' %}">How it Works </a></li>
<li class="nav-item"><a class="nav-link {% block work %}{% endblock%}" href="{% url 'work' %}">Work With Us</a></li>
<li class="nav-item"><a class="nav-link {% block contact %}{% endblock%}" href="{% url 'contact' %}">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
</ul>
</div>
</div>
</nav>
Try replacing navbar-expand-lg to navbar-expand class on <nav> tag.
"lg" is for larger devices based on responsiveness.
You can check doc here: https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
So your code should be:
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" id="logo" href="/">Company</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav" aria-label="Expand Navigation">
<div class="navbar-toggler-icon"></div>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link {% block home %}{% endblock%}" href="{% url 'index' %}">Home </a></li>
<li class="nav-item"><a class="nav-link {% block pricing %}{% endblock%}" href="{% url 'index' %}">Pricing </a></li>
<li class="nav-item"><a class="nav-link {% block how %}{% endblock%}" href="{% url 'index' %}">How it Works </a></li>
<li class="nav-item"><a class="nav-link {% block work %}{% endblock%}" href="{% url 'work' %}">Work With Us</a></li>
<li class="nav-item"><a class="nav-link {% block contact %}{% endblock%}" href="{% url 'contact' %}">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
</ul>
</div>
</div>
</nav>
Add aria-expanded="false" on button
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" id="logo" href="/">Company</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav" aria-expanded="false aria-label="Expand Navigation">
<div class="navbar-toggler-icon"></div>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link {% block home %}{% endblock%}" href="{% url 'index' %}">Home </a></li>
<li class="nav-item"><a class="nav-link {% block pricing %}{% endblock%}" href="{% url 'index' %}">Pricing </a></li>
<li class="nav-item"><a class="nav-link {% block how %}{% endblock%}" href="{% url 'index' %}">How it Works </a></li>
<li class="nav-item"><a class="nav-link {% block work %}{% endblock%}" href="{% url 'work' %}">Work With Us</a></li>
<li class="nav-item"><a class="nav-link {% block contact %}{% endblock%}" href="{% url 'contact' %}">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
</ul>
</div>
</div>
</nav>
I have been tried all day to make the link active when I click on it but it only works with a href that is "fake" but not with my href. In the example code, it works for Research but not for Upload.
<li class="nav-item">
<a class="nav-link" href="{{ url_for('uploader.upload') }}">Upload</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Research</a>
</li>
ended up working, turned out jquery and bootstrap were not in sync
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{{ url_for('main.index') }}">Hazen</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">
{% if not current_user.is_anonymous %}
<a class="nav-item nav-link {% if display_page=='index' %} active{%
endif %}" class="nav-item nav-link" href="{{ url_for('main.user',
username=current_user.username) }}">Dashboard</a>
<a class="nav-item nav-link {% if display_page=='upload' %} active{%
endif %}" href="{{ url_for('uploader.upload') }}">Upload</a>
{% endif %}
{% if current_user.is_anonymous %}
<a class="nav-item nav-link" href="{{ url_for('auth.login')
}}">Login</a>
{% else %}
<a class="nav-item nav-link" href="{{ url_for('auth.logout')
}}">Logout</a>
{% endif %}
</div>
</div>
</nav>
I would like to move only the logout and {{user.first.name}} to the right. I tried using ms-auto but it didn't work. Am I using it correctly?
{% load static %}
<!doctype html>
<html>
<link rel="stylesheet" type="text/css" href="{% static 'navbar/css/style.css' %}">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'home' %}">Website Monitoring Portal</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'add-url' %}">Add URL</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item ms-auto ">
<a class="nav-link" href = "{% url 'logout' %}">Logout</a>
</li>
<h5 class="li-right" >
<li class="nav-item"> Hello, {{user.first_name}} </li>
</h5>
{% else %}
<li class="nav-item">
<a class="nav-link" href = "{% url 'register' %}">Register</a>
</li>
<li >
<a class="nav-link" href="{% url 'login' %}">Login</a>
</li>
{% endif %}
</ul>
<form class="d-flex" role="search" method="POST" action="{% url 'search-url' %}" >
{% csrf_token %}
<input class="form-control me-2" type="search" placeholder="Search Url" aria-label="Search" name="searched">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</html>
The Home and Add URL will remain on the left while Logout and 'hello' should be on the right. I tried using CSS and using text-align: right but that did not work also. So now I tried ms auto but it is still not working. Some guidance on this will be really helpful. thank you so much
text-align:right only aligns the text inside of the object. it does not move the object itself.
I would be able to help more if you could also share your css and add a code snipplet.
Did you try using float:right? like so:
<li class="nav-item right-nav-item">
<a class="nav-link" href = "{% url 'logout' %}">Logout</a>
</li>
.right-nav-item{
float:right;
}
snapshot
The navbar is not getting extended if scroll the page to the right. I have used the bootstrap navbar from this page. (view-source:https://getbootstrap.com/docs/4.0/examples/navbars/)(second nav). I am using bootstrap.min.css. I have surfed StackOverflow for this issue. some post suggests using
width: 100%;
height: 150px;
margin: 0px auto;
position: relative;
will resolve this issue. But I could not find the same in bootstrap.min.css. Also changing the same in bootstrap.css doesn't work. Please guide me to resolve this issue.
HTML file:
!DOCTYPE html>
<html>
<head>
<title>Inventory</title>
</head>
{% load static %}
<link rel="stylesheet" href="{% static '/css/bootstrap.min.css '%}">
<link rel="stylesheet" href="{% static '/css/button.css '%}">
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="#">xxxxxxxxx - xxxxx</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<form method="POST" action="/logout/">
{% csrf_token %}
<!-- <a class="nav-link" href="{% url 'logout' %}">Logout</a> -->
<input class="nav-link" id="button" type="submit" value="Logout" style="float: right">
</form>
<!-- <a class="nav-link" href="{% url 'login' %}">Logout</a> -->
</li>
</ul>
</div>
</nav>
<div class="container">
{% block body %}
{% endblock %}
</body>
</html>
Tha
nks