Today's my website is looking like this:
When I connect into my website through mobile, the appearence changes to:
Instead of this, I'd like that the bag image didn't go to the menu - something like this in the right:
My code:
<body>
<!-- jQuery first -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border" id="top">
<a class="navbar-brand">DeniseAndrade</a>
<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">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'root:seller' seller 'Novidades' %}">Novidades</a>
</li>
{% for category in categories %}
<li class="nav-item">
<a class="nav-link" href="{% url 'root:seller' seller category.category %}">{{ category.category }}</a>
</li>
{% endfor %}
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'cart:cart_detail' %}"><img src="{% static 'bag1.png' %}" width="25px"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Login</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="pb-2 mb-2">
{% block page_header %}{% endblock page_header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</main>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
Any help?
Thank you!!
I'm not sure if this is the best practice. But there you go.
I just moved the request tag outside the div collapse navbar-collapse
<a class="nav-link outside__div" href="{% url 'cart:cart_detail' %}"><img src="assets/images/image.jpg" width="25px"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
------
</div>
CSS changes:
.outside__div {
position: absolute;
right: 80px;
}
And that's how it would look like
updated: I think that might be useful. it's all up to you to pick the best way either with position absolute or this one.
HTML:
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border" id="top">
<a class="navbar-brand">DeniseAndrade</a>
<div class="d-flex flex-row order-2 order-md-3">
<ul class="navbar-nav flex-row ">
<li class="nav-item pr-3">
<a class="nav-link" href="{% url 'cart:cart_detail' %}"><img src="assets/images/image.jpg" width="25px"></a>
</li>
</ul>
<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>
<div class="collapse navbar-collapse order-3 order-md-2" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'root:seller' seller 'Novidades' %}">Novidades</a>
</li>
{% for category in categories %}
<li class="nav-item">
<a class="nav-link" href="{% url 'root:seller' seller category.category %}">{{ category.category }}</a>
</li>
{% endfor %}
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Login</a>
</li>
</ul>
</div>
</nav>
Refer to the Bootstrap documentation and see if there is a way to indicate a nav-item that should never get collapsed. At a glance, "External Content" might be what you want?
If all else fails, you could also accomplish this by putting the bag icon in a div outside the navbar and positioning it manually. Of course, this is less than ideal.
Related
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;
}
I have this bootsrap navBar, when i resize the window the navbar is shrunk and displays the hamburger, however when i click the hamburger the links aren't shown.
this is the code:
<div class="fixed-top">
<nav class="navbar navbar-dark navbar-expand-lg cusSticky" style="background-color: #000000b3;">
<!-- Navbar content -->
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'front:index' %}"><img class="image-responsive"
src="{% static 'front/images/logo2.png' %}"
alt="404"
style="position: relative; max-width: 268px; margin-left:100px;"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0"
style="display: flex; margin-right: 50; margin-left:500px; text: white;">
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:index' %}">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:about' %}">About</a>
</li>
<li class="nav-item active">
<a class="nav-link"
href="{% url 'front:portfolio' %}">Portfolio</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:contact' %}">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link"
href="{% url 'front:calendar' %}">Calendar</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'user_area:loading'%}">
<i class="fa fa-user" aria-hidden="true"></i>
{% if user.is_authenticated %}
User Area - {{ user.first_name}}
{% else %}
Login
{% endif %}</a></li>
</ul>
</div>
</div>
</nav>
</div>
I feel like i am missing something but i can't figure it out.
Instead of data-bs-toggle and data-bs-target use data-toggle and data-target.I solved your problem with the toggler, the rest is up to you... Work on your code! It leaves a lot to be desired ... ;-) Good Luck !
<!doctype html>
<html lang="en">
<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://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<title>Bootstrap 4.6 Navbar with toggler</title>
</head>
<body>
<div class="fixed-top">
<nav class="navbar navbar-dark navbar-expand-lg cusSticky" style="background-color: #000000b3;">
<!-- Navbar content -->
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'front:index' %}"><img class="image-responsive" src="{% static 'front/images/logo2.png' %}" alt="404" style="position: relative; max-width: 268px; margin-left:100px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0" style="display: flex; margin-right: 50; margin-left:500px; text: white;">
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:index' %}">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:about' %}">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:portfolio' %}">Portfolio</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:contact' %}">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:calendar' %}">Calendar</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'user_area:loading'%}">
<i class="fa fa-user" aria-hidden="true"></i> {% if user.is_authenticated %} User Area - {{ user.first_name}} {% else %} Login {% endif %}</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>
</html>
It doesn't look as though you have any dropdown-menu's inside the main navbar-nav list. Copy this for as many dropdown's as you need.
<ul class="navbar-nav">
<!-- Dropdown Start -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button"
data-toggle="dropdown" aria-expanded="false">
MAIN DROPDOWN BUTTON
</a>
<ul class="dropdown-menu" aria-labelledby="servicesDropdown">
<li><a class="dropdown-item" href="#">DROPDOWN ITEM 1</a></li>
<li><a class="dropdown-item" href="#">DROPDOWN ITEM 2</a></li>
<li><a class="dropdown-item" href="#">DROPDOWN ITEM 3</a></li>
<li><a class="dropdown-item" href="#">DROPDOWN ITEM 4</a></li>
</ul>
</li>
<!-- Dropdown End -->
</ul>
I have a HTML file below. When I make the browser smaller, I can see the hamburger menu, but when I click on it, nothing happens.
<nav class="navbar navbar-expand-lg navbar-light">
Homepage
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<!-- left side -->
</ul>
<ul class="navbar-nav">
<!-- right side -->
{% if user.is_authenticated %}
<li class="nav-item ml-3 mr-3">
<a class="nav-link" href="#">{{user.username}}</a>
</li>
<li>
<a class="nav-link" href="{% url 'logout'%}">Log out</a>
</li>
{% else %}
<li class="nav-item ml-3 mr-3">
<a class="nav-link" href="{% url 'login'%}">Log In</a>
</li>
<li>
<a class="nav-link" href="{% url 'signup' %}">Sign Up</a>
</li>
{% endif %}
</ul>
</div>
</nav>
How stupid my mistake was!
I forgot to load bootstrap js files!
Add this:
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
to the bottom of your <body>. Further reading about bootstrap CDN
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
This question already has an answer here:
menu toogle button not working in bootstrap 4
(1 answer)
Closed 4 years ago.
Currently when the screen is minimized, the toggle button appears, but I would like to be able to click it and see the contents of the navbar when the screen is regular size. Currently clicking it doesn't do anything. Is there a way to resolve this without JS?
This is my HTML page:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Great Songs</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{% url 'great_songs:great_songs' %}">Great Songs</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:artists' %}">Artists <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:genres' %}">Genres</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:producers' %}">Producers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:labels' %}">Labels</a>
</li>
</ul>
</div>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
You don't need to write your own code to make it works, but you need to also include bootstraps js library and its dependencies (jQuery + popper.js), here you will find information how should you do it https://getbootstrap.com/docs/4.1/getting-started/download/
in case you have some issues with that let me know I will show you how to implement it to your code
#edit:
FYI bootstrap.css, provide for you only bunch of css classes which you can use for quick styling but it doesn't provides any interactivity unless those supported by css such as element hover or focus
code:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<title>Great Songs</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{% url 'great_songs:great_songs' %}">Great Songs</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:artists' %}">Artists
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:genres' %}">Genres</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:producers' %}">Producers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:labels' %}">Labels</a>
</li>
</ul>
</div>
</nav>
<div class="container">
{% block content %} {% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>