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
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 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
I can't seem to get my navbar dropdown or hamburger collapse to work. They both show up, but no actions occur when I click on either of them. I have jQuery, popper, and bootstrap js at the bottom in (I believe) the correct order, I'm not sure what else I can do.
I also do not have any conflicting css code that interacts with any id's on the navbar.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yoon Family Cookbook</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
<script src="https://kit.fontawesome.com/99822d1753.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'home' %}">Yoon Family Cookbook</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">
{% if request.user.is_authenticated %}
<a class="nav-link active" aria-current="page" href="{% url 'add_recipe' %}">Add Recipe</a>
{% endif %}
</li>
</ul>
<ul class="navbar-nav ml-auto mb-2 mb-lg-0">
{% if request.user.is_authenticated %}
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Hello, {{request.user.first_name}}</span>
</a>
<div class="dropdown-menu dropdown-menu-right" id="dropdown-content" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">Log Out</a>
{% else %}
<a class="login-button" href = "{% url 'login' %}">Login</a>
{% endif %}
</li>
</ul>
</div>
</div>
</nav>
{% block content %}
{% endblock %}
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
</body>
</html>
First of all, you are using css and js from two different versions:
4.3.1/css/bootstrap.min.css
3.4.1/js/bootstrap.min.js
Pick one version and use the same for both.
Secondly, your html structure is incorrect. The nav.navbar should be inside the div.container-fluid.
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
...
</nav>
...
</div>
...
</body>
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.
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>