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>
Related
I am looking to have a navbar toggler so it still looks okay for mobile.
Here is the link to the bootstrap documentation that I'm referring to.
https://getbootstrap.com/docs/4.3/components/navbar/
Take for example their code here:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
When I am on their site and run the inspect, everything runs perfectly fine.
When I run the code on my site, the dropdown menu is default on and cannot be turned off. Any help would be well appreciated.
I'm kind of an absolute mess with the libraries so I will include that as well, there could be some dependency issues that I am not understanding.
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="{{ url_for('static', filename='logo/icon_logo.png') }}">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="static/css/bootstrap.min.css" />
<link rel="stylesheet" href="static/css/2bootstrap.min.css" />
<link rel="stylesheet" media="screen" href="static/css/main.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<title>Mansura</title>
</head>
*stuff in the body below
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="static/js/bootstrap-js/bootstrap.js"></script>
This mess is really me trying to throw s*** at the wall and see if I can get anything to make it work, seems to not have helped.
Thanks
You are using the script 2 times remove this script from the header and just keep it body below.
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
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
Linked HTML file with bootstrap-v5, copied exact code from documentation.
Toggle button on the right not revealing "nav-item".
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!--class of bootsrap -->
<a class="navbar-brand" style="padding-left: 10px;">Code Decipher</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Content</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Have you link bootstrap JS file ?
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
I've been using bootstrap 4.3.1 for a laravel project and everything is working good but the bottom navigation bar that I'm using, expanded once, does not want to collapse back while in mobile view.
As soon as I click the collapse button, code changes into being collapsed and then instantly goes back to being expended.
What could be the issue here?
Here's the code for the navigation bar:
<nav class="navbar fixed-bottom navbar-expand-lg navbar-light">
<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 m-auto">
<a class="nav-item nav-link active" href="/">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="/posts">Blog</a>
<a class="nav-item nav-link" href="/services">Service</a>
<a class="nav-item nav-link" href="/about">About</a>
</div>
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#endif
#else
<li>Create Post</li>
<li>{{ Auth::user()->name }} <span class="caret"></span></li>
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" class="nav-item nav-link">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</li>
#endguest
</ul>
</div>
</nav>
Here's the HTML output of the above code from the browser:
<nav class="navbar fixed-bottom navbar-expand-lg navbar-light">
<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 m-auto">
<a class="nav-item nav-link active" href="/">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="/posts">Blog</a>
<a class="nav-item nav-link" href="/services">Service</a>
<a class="nav-item nav-link" href="/about">About</a>
</div>
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="http://laravel.build/login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://laravel.build/register">Register</a>
</li>
</ul>
</div>
</nav>
Content of my head tag:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Google Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
Aside from the code above, I also have bootstrap related scripts near the end of the body tag:
<!-- Bootstrap JS, Popper.js and jQuery -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Some times it happens when you include bootstrap twice. Check your js files where bootstrap.js is referenced. Or include it globaly in webpack.mix.js documentation
This question already has answers here:
Bootstrap 4 navbar not collapsing on large screen
(4 answers)
Bootstrap 4 - Toggle button not working [duplicate]
(3 answers)
Closed 4 years ago.
I'm making a site for my club in school (Brazil) and I'd like to know how to fix the issue in my site on mobile. The three lines in mobile when pressed don't do anything.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>ClubeDiversidade</title>
</head>
<style>
body {
background-color: orange;
}
</style>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Clube da diversidade</a>
<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">
<li class="nav-item active">
<a class="nav-link" href="#">Pagina inicial <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Inscrição</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sobrenatural.html">Sobrenatural</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tecnologia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Outras atividades</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<center>Bem-vindo!!</center>
</div>
</body>
</html>
Hi refers to Bootstrap Documentation.
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
You need to add these lines into your page in order to work.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
I used Bootstrap 4 Editor and copied your code in and it works perfectly, because the editor has built-in bootstrap javascripts.
You have to add jquery and bootstrap js before closing the body to get the working toggle.
Note: The order is important here, put the jquery js link first and then bootstrap js.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>ClubeDiversidade</title>
</head>
<style>
body {
background-color: orange;
}
</style>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Clube da diversidade</a>
<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">
<li class="nav-item active">
<a class="nav-link" href="#">Pagina inicial <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Inscrição</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sobrenatural.html">Sobrenatural</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tecnologia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Outras atividades</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<center>Bem-vindo!!</center>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</body>
</html>