I'm looking for improve my Django website and especially the CSS part. I don't have knowledge about CSS because I'm beginning to learn this library.
I'm using Bootstrap 3 and I would like to get your opinions about columns using and the cutting of my Django website.
It's the first time I'm using .col-md-x and I don't know if it's true? My website application will be use with a large screen but also tablet or smartphone.
I have two examples :
Global website page
Variant
Can I write my script in order to get this kind of things? Is it correct to write CSS/Bootstrap3 like this?
Thank you
EDIT :
My script for base template looks like this :
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
{% load static %}
{% load user_tags %}
<title> DatasystemsEC - Page non trouvée </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="{% get_static_prefix %}{{ mytheme }}/css/Base_Not_Found.css"/>
</head>
<!-- #################### -->
<!-- Upper navigation bar -->
<!-- #################### -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.datasystems.fr/"> DatasystemsEC </a>
</div>
<!-- Home tab -->
<ul class="nav navbar-nav">
<li> <span class="glyphicon glyphicon-home"></span> Accueil </li>
{% if user.is_authenticated %}
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
<span class="glyphicon glyphicon-info-sign">
</span> Informations Mairie
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Créer/Editer les informations de la Mairie </li>
<li> <span class="glyphicon glyphicon-home"></span> Consulter les informations de la Mairie </li>
</ul>
</li>
<!-- Resume Tab with acts -->
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-file">
</span> Actes Etat Civil <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user">
</span> Fiches Individuelles
</a>
<ul class="dropdown-menu">
<li>Accueil Fiches Individuelles</li>
<li>Création Fiches Individuelles</li>
<li>Consultation Fiches Individuelles</li>
{% if request.user|has_group:"admin" %}
<li>Edition Fiches Individuelles</li>
<li>Suppression Fiches Individuelles</li>
{% endif %}
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-baby-formula"></span> Actes de Naissance</a>
<ul class="dropdown-menu">
<li>Accueil Actes de Naissance</li>
<li>Création Actes de Naissance</li>
<li>Consultation Actes de Naissance</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-eye-open"></span> Actes de Reconnaissance / Adoption </a>
<ul class="dropdown-menu">
<li>Accueil Actes de Reconnaissance</li>
<li>Création Actes de Reconnaissance</li>
<li>Consultation Actes de Reconnaissance</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-heart"></span> Actes de Mariage</a>
<ul class="dropdown-menu">
<li>Accueil Actes de Mariage</li>
<li>Création Actes de Mariage</li>
<li>Consultation Actes de Mariage</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-flash"></span> Actes de Divorce</a>
<ul class="dropdown-menu">
<li>Accueil Actes de Divorce</li>
<li>Création Actes de Divorce</li>
<li>Consultation Actes de Divorce</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-fire"></span> Actes de Décès</a>
<ul class="dropdown-menu">
<li>Accueil Actes de Décès</li>
<li>Création Actes de Décès</li>
<li>Consultation Actes de Décès</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-book">
</span> Tables Annuelles & Décennales <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-file">
</span> Edition Tables annuelles
</a>
<ul class="dropdown-menu">
<li>Naissances</li>
<li>Reconnaissances</li>
<li>Mariages</li>
<li>Décès</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-book"></span> Edition Tables décennales</a>
<ul class="dropdown-menu">
<li>Naissances</li>
<li>Reconnaissances</li>
<li>Mariages</li>
<li>Décès</li>
</ul>
</li>
</ul>
</li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
<span class="glyphicon glyphicon-list-alt">
</span> Recensement
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li> <span class="glyphicon glyphicon-th-list"></span> Liste Recensement </li>
<li> <span class="glyphicon glyphicon-file"></span> Edition de l'Attestation de Recensement </li>
</ul>
</li>
{% endif %}
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li></span> Déconnexion </li>
<li><a>{{user.username}} </a></li>
{% else %}
<li><span class="glyphicon glyphicon-log-in"></span> Connexion </align></li>
{% endif %}
{% if request.user|has_group:"admin" %}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/admin.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"visiteur"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/visiteur.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"employé"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/employé.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"officier"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/officier.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"maire"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/maire.png' %}{{ user.get_profile.avatar }}">
{% endif %}
</ul>
</ul>
</div>
</div>
</div>
</nav>
<script>
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
</script>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div class="logo">
<img src="{% static 'images/logo.png' %}" class="img-responsive center-block" alt="Logo">
</div>
</div>
<div class="col-md-10">
<div class="title">
{% block title %}
{% endblock %}
</div>
</div>
</div>
</div>
{% if user.is_authenticated %}
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar1">
<div class="left-navigation">
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-home"></span> Accueil</strong></h5>
<li> Accueil</li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-book"></span> Informations Mairie</strong></h5>
{% if request.user|has_group:"admin" %}
<li>Créer/Editer les informations</li>
{% endif %}
<li>Consulter les informations</li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span> Actes Etat Civil</strong></h5>
<li>Fiches Identités</li>
<li>Actes de Naissance</li>
<li>Actes de Reconnaissance / Adoption</li>
<li>Actes de Mariage</li>
<li>Actes de Divorce</li>
<li>Actes de Décès</li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span> Tables Annuelles & Décennales</strong></h5>
<li>Tables Annuelles</li>
<li>Tables Décennales</li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span>Recensement</strong></h5>
<li>Liste de Recensement</li>
<li>Attestation de Recensement</li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-book"></span> DatasystemsDOC</strong></h5>
<li>Individus</li>
<li>Tables</li>
<li>Recensement</li>
</ul>
{% if request.user|has_group:"admin" %}
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span> Configuration</strong></h5>
<li>Thème</li>
</ul>
{% endif %}
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span> Aide & Support</strong></h5>
<li>Besoin d'aide ?</li>
<li>Mentions légales</li>
</ul>
</div>
</div>
<body>
<div class="col-md-10">
{% block content %}
{% endblock content %}
</div>
</body>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<footer>
<p class="text-muted footer"> © DatasystemsEC 2017 - Tous droits réservés <br /> Version Démo</p>
</footer>
</div>
</div>
</div>
{% endif %}
</html>
I added some classes row and .col-md-x. I want to structure my script correctly with Bootstrap grid but I never made this before.
I have a few suggestions for you--
no.1
you are saying that your website will be viewed in all screen sizes so you have to make it responsive.
In order to make a site responsive in bootstrap you need to use all the responsive grid classes---col-sm-* col-xs-* col-md-* col-lg-*. Your design will not look proper in xs and sm devices.
no.2
You don't need to use col-md-* in the nav as it automatically takes full width.
no.3
in the variant portion You are using a blank .col-md-1 that's not how you achieve blank spacing in bootstrap rather use offset classes. Use .col-md-1 col-md-offset-1 it will create a blank column.
no.4
Your design won't look good in extra small devices. Try to introduce more rows for xs devices in order to stack your contents in the middle portion(although this is subjective as I don't know what contents you are going to have..just a general idea from my side.)
Related
How do I align this menu properly? I have tried using inline-block for the li tag but that didn't align this.
Here's the current code, please help with ideas
<nav class="navbar navbar-expand-md">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'index' %}">Active Listings</a>
</li>
<li class="nav-item">
Category
</li>
<li class="nav-item">
Sell
</li>
</ul>
<ul class="navbar-nav ml-auto">
<div>
{% if user.is_authenticated %}
welcome, <strong>{{ user.username }}</strong>.
{% else %}
Not signed in.
{% endif %}
</div>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">Log Out</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'register' %}">Register</a>
</li>
{% endif %}
</ul>
</nav>
Try to add display flex and align items center. this will 100% solve your problem
ul {
display: flex;
align-items: center;
}
this is my code:
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
App
App
<nav >
{% if user.is_authenticated %}
<a class="nav-link" href="#">Link 1</a>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ user.username }}</a>
<div class="dropdown-menu dropdown-menu-right text-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'listingfournisseur' %}">Update fournisseur list</a>
<a class="dropdown-item" href="{% url 'updatepayables' %}">Eletronic Payment</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'listingclient' %}">Update Clients list</a>
<a class="dropdown-item" href="{% url 'account_logout' %}">Log Out</a>
</div>
</li>
</ul>
{% else %}
<a class="p-2 text-dark" href="{% url 'account_login' %}">Log In</a>
<a class="btn btn-outline-primary" href="{% url 'account_signup' %}">Sign Up</a>
{% endif %}
</nav>
</div>
I m tring to have link1 item just on the left of dropdown.
I don t understand why it is up to dropdown ?
this is what I see:
thanks for help
In you nav add the CSS property display: flex and you will have it one next to the other. But after you will just have to play with the size because an tag don't have "padding" but tag have top, left and bottom "padding".
<nav class="b">
<div>ets</div>
<div><ul>test</ul></div>
</nav>
<style>
.b{
display:flex;
}
</style>
On my index.html, my navbar changed to vertical after inserting Bootstrap carousel.
I tried changing everything I could, like the font size, width, etc.
But it seems like it is the problem of the carousel itself. Once I import the library using this line of code: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">, the navbar will automatically resize into vertical, but if I comment this line out, the navbar becomes normal again but the carousel function will then not work.
How can I fix it to make it looks like other pages. (Navbar on top and horizontally)
For the navbar, I've got a base.html that basically the code for the navbar, and it is extended in everypage.
]1
index.html
{% extends "morse_logs/base.html" %}
{% block content %}
{% load static %}
<title>Home</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.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.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.carousel{
background: #2f4357;
margin-top: 20px;
}
.carousel-item{
min-height: 20px; /* Prevent carousel from being distorted if for some reason image doesn't load */
}
.bs-example{
margin: 20px;
}
</style>
</head>
<div class="container">
<div id="carouselExampleControls" class="carousel slide col-sm-12" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{% static 'morse_logs/img/X.jpg' %}" alt="First slide">
</div>
<div class="carousel-item">
<img src="{% static 'morse_logs/img/Y.jpg' %}" alt="Second slide">
</div>
<div class="carousel-item">
<img src="{% static 'morse_logs/img/Z.jpg' %}" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
{% endblock content %}
base.html
This is the file for my navbar
{# Load the tag library #}
{% load bootstrap3 %}
{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript %}
{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
</head>
<div class="container ">
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #2d2d30; font-size: 18px !important; font-family: Montserrat, sans-serif;">
<div class="container-fluid ">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'morse_logs:index' %}"><span class="glyphicon glyphicon-record"></span> Morse Code App</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% if user.is_authenticated %}
<li>Home</li>
<li>Tutorials</li>
<li>Game</li>
<li>Cipher</li>
<li>Decipher</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Profile </li>
<li><span class="glyphicon glyphicon-log-out"></span> Log out </li>
{% else %}
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<li><span class="glyphicon glyphicon-pencil"></span> Register</li>
{% endif %}
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
<body>
<br/><br/><br/>
<div class="container">
<div class="row">
<div class="col-sm6 col-sm-offset-3">
{% block content %}
{% endblock content %}
</div>
</div>
</div>
</body>
gameDirectory.html
normal webpage layout
{% extends "morse_logs/base.html" %}
{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'morse_logs/css/style.css' %}">
<div class="container">
<title>Game Index</title>
<h1>GAME INDEX</h1>
Game 1
</div>
{% endblock content %}
If you look closely there is a small HTML syntax error in base.html. Currently, you have included bootstrap navigation outside the body tag.
Replace the base.html file with the following code:
{# Load the tag library #}
{% load bootstrap3 %}
{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript %}
{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container ">
<nav class="navbar navbar-inverse navbar-fixed-top"
style="background-color: #2d2d30; font-size: 18px !important; font-family: Montserrat, sans-serif;">
<div class="container-fluid ">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'morse_logs:index' %}"><span
class="glyphicon glyphicon-record"></span> Morse Code App</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% if user.is_authenticated %}
<li>Home</li>
<li>Tutorials</li>
<li>Game</li>
<li>Cipher</li>
<li>Decipher</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="{% url 'users:view_profile' %}"><span class="glyphicon glyphicon-user"></span>
Profile </a></li>
<li><a href="{% url 'users:logout' %}"><span class="glyphicon glyphicon-log-out"></span> Log out
</a></li>
{% else %}
<li><span class="glyphicon glyphicon-log-in"></span> Login
</li>
<li><a href="{% url 'users:register' %}"><span class="glyphicon glyphicon-pencil"></span>
Register</a></li>
{% endif %}
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<br /><br /><br />
<div class="container">
<div class="row">
<div class="col-sm6 col-sm-offset-3">
{% block content %}
{% endblock content %}
</div>
</div>
</div>
</body>
I am developing a laravel app. I need two navbars, number Two below number One, one containing logo and logout link, another containing all the links.
I have achieved the look but the dropdown of the logout link is opening in navbar One resulting in increase in the height of the navbar each time the dropdown is toggled.
Images -
Here is my code -
<div id="header-main">
<nav class="navbar navbar-light bg-light" id="header">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
<img src="{{ asset('images/accounts.png') }}" height="50px">
</a>
#auth
<div class="navbar-nav">
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">{{ __('Logout') }}</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
</div>
#endauth
</div>
</nav>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item #if(Route::current()->getName() == 'login') active #endif">
<a class="nav-link" href="{{ route('login') }}"><i class="fas fa-sign-in-alt"></i> {{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item #if(Route::current()->getName() == 'register') active #endif">
<a class="nav-link" href="{{ route('register') }}"><i class="fas fa-user-plus"></i> {{ __('Register') }}</a>
</li>
#endif
#else
<li class="nav-item #if(Route::current()->getName() == 'home') active #endif">
<a class="nav-link" href="{{ route('home') }}"><i class="fas fa-home"></i> {{ __('Home') }}</a>
</li>
#endguest
</ul>
</div>
</div>
</nav>
Somebody help me.
Use position-absolute on the dropdown menu...
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
username<span class="caret"></span>
</a>
<div class="dropdown-menu position-absolute dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}" >Logout</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> #csrf </form>
</div>
</li>
https://codeply.com/p/fHoKygnLv7
I using bootstrap(4) but the navbar for small viewports doesn't show the hamburger icon. I think the issue could be the asset isn't loading properly, but I can see it being fetched in chrome dev tools-> network.
(website is based on this template
https://wrapbootstrap.com/theme/velocity-for-products-bootstrap-4-WB0N38R04)
Navbar html
<header id="header" class="header navbar-fixed-top">
<div class="container">
<h1 class="logo">
<span class="text">Cheaper</span>
</h1><!--//logo-->
<nav class="main-nav navbar navbar-right navbar-inverse navbar-expand-md" role="navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button><!--//nav-toggle-->
<div id="navbar-collapse" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active nav-item"><a class="nav-link" href="{% url 'home' %}">Home</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'how' %}">How it works</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'faq' %}">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'about' %}">About us</a></li>
{% if request.user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'users:detail' request.user.username %}">My Profile</a>
</li>
<li class="nav-item nav-item-cta last">
<a class="btn btn-cta btn-cta-secondary" href="{% url 'account_logout' %}">Log out</a>
</li>
{% else %}
<li class="nav-item"><a class="nav-link" href="{% url 'account_login' %}">Log In</a></li>
<li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary"
href="{% url 'users:postcode' %}">Sign Up</a></li>
{% endif %}
</ul><!--//nav-->
</div><!--//navbar-collapse-->
</nav><!--//main-nav-->
</div><!--//container-->
</header><!--//header-->
css class for the icon
.navbar-toggler-icon {
background: transparent url('../images/hamburger-icon.svg') no-repeat center center;
}
You could use some thing like this. I have changed button to a link. And did changes in the .navbar-toggler-icon class as well.
.navbar-toggler-icon {
background: url('https://image.flaticon.com/icons/svg/198/198416.svg')no-repeat center center;
display: inline-block;
height: 17px;
width: 50px;
}
<header id="header" class="header navbar-fixed-top">
<div class="container">
<h1 class="logo">
<span class="text">Cheaper</span>
</h1>
<!--//logo-->
<nav class="" role="navigation">
<a href="" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
<span class="navbar-toggler-icon"></span>
</a>
<!--//nav-toggle-->
<div id="navbar-collapse" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active nav-item"><a class="nav-link" href="{% url 'home' %}">Home</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'how' %}">How it works</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'faq' %}">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'about' %}">About us</a></li>
{% if request.user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'users:detail' request.user.username %}">My Profile</a>
</li>
<li class="nav-item nav-item-cta last">
<a class="btn btn-cta btn-cta-secondary" href="{% url 'account_logout' %}">Log out</a>
</li>
{% else %}
<li class="nav-item"><a class="nav-link" href="{% url 'account_login' %}">Log In</a></li>
<li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary" href="{% url 'users:postcode' %}">Sign Up</a></li>
{% endif %}
</ul>
<!--//nav-->
</div>
<!--//navbar-collapse-->
</nav>
<!--//main-nav-->
</div>
<!--//container-->
</header>
<!--//header-->