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
Related
Currently, my navbar in bootstrap looks fine when in full screen. It looks like this.
However, bootstrap automatically condense the items in to a stack when below a certain width. That is when it looks bad as the Register and Login are on the same line. Looks like this.
I want the navbar to have the Register and Login routes on the right while containing the routes as a stack when condensed.
Current HTML for the nav.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="{{ url_for('home')}}">Test</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Pricing</a>
</li>
</ul>
{% if current_user.is_authenticated %}
<span class="navbar-text mb-2 mb-lg-0">
Logout
</span>
{% else%}
<span class="navbar-text mb-2 mb-lg-0">
Login
</span>
<span class="navbar-text mb-2 mb-lg-0">
Register
</span>
{% endif %}
</div>
</div>
</nav>
Well, I am not sure if I understand the question pretty well,
but from what I understand I would move the login, register, and logoff into a div and apply a media query in the CSS to do what you ask for.
<style>
#media only screen and (max-width: 990px) {
.chnageMeWhenSmall {
position: absolute;
right: 60px;
}
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="{{ url_for('home')}}">Test</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Pricing</a>
</li>
</ul>
<div class="chnageMeWhenSmall">
{% if current_user.is_authenticated %}
<span class="navbar-text mb-2 mb-lg-0">
Logout
</span>
{% else%}
<span class="navbar-text mb-2 mb-lg-0">
Login
</span>
<span class="navbar-text mb-2 mb-lg-0">
Register
</span>
{% endif %}
</div>
</div>
</div>
</nav>
Navbar should appear as a stack only in mobile view. You can also consider checking if you have added xs- classes properly to get the desired view. I can only see lg classes in your snippet. Pelase try to share the codepen if it still doesn't work.
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 navbar collapse button but the items in the dropdown aren't aligned. I think it is something to do with how I have the divs setup. How do I resolve?
<nav class="navbar navbar-expand-md navbar-light mb-4 row">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-4 text-left collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item" id="better_candidate">
<a class="nav-link" href="">A Better Candidate</a>
<li class="nav-item" id="better_employer">
<a class="nav-link" href="">A Better Employer</a>
<li class="nav-item" id="better_stuff">
<a class="nav-link" href="">Better Stuff</a>
</ul>
</div>
<div class="col-4 text-center">
<a class="navbar-brand" href="{% url 'a_better_place:home' %}">
A Better Place
</a>
</div>
<div class="col-4 text-right collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item" id="about_us">
<a class="nav-link" href=""> About Us </a>
<li class="nav-item" id="contact">
<a class="nav-link" href="{% url 'a_better_place:contact' %}">
Contact
</a>
</ul>
</div>
</nav>
Image
Normally, the col and row aren’t used in the navbar, and if you’re going to have two navbar-collapse lists, you can’t give them the same ID. Instead, you can use a class and use that class name in the navbar-toggler’s data-target.
To have the branding in the center on larger screens, you can use flex order.
FYI – when posting a question, it’s best to include a functional snippet so people can see the problem.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light mb-4">
<!-- get rid of row -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-navbar-collapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand order-md-2 " href="{% url 'a_better_place:home' %}">
A Better Place
</a>
<!-- can't have dual IDs -->
<div class="collapse navbar-collapse dual-navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item" id="better_candidate">
<a class="nav-link" href="">A Better Candidate</a>
<li class="nav-item" id="better_employer">
<a class="nav-link" href="">A Better Employer</a>
<li class="nav-item" id="better_stuff">
<a class="nav-link" href="">Better Stuff</a>
</ul>
</div>
<!-- drop the div around brand -->
<!-- remove col-4 text-right -->
<div class="collapse navbar-collapse dual-navbar-collapse order-md-3">
<ul class="navbar-nav ml-auto">
<li class="nav-item" id="about_us">
<a class="nav-link" href=""> About Us </a>
<li class="nav-item" id="contact">
<a class="nav-link" href="{% url 'a_better_place:contact' %}">
Contact
</a>
</ul>
</div>
</nav>
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>