I'm trying my hardest to figure it out but some how my navbar that i made with bootsrap "I think" is not corresponding with my jQuery-ui. And I can't understand why. If some one the issues you will get dogma from Doge god. Cheers guys here is the code:
HTML
<nav class="navbar navbar-expand-md navbar-light bg-light" >
<div class="container" >
<a href="#" class="navbar-brand">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#toggleMobileMenu"
aria-controls="toggleMobileMenu"
aria-label="Toggle navigation"
id="slidebutton"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse offcanvas-collapse"
id="toggleMobileMenu" id="navslide">
<ul class="navbar-nav ms-auto">
<li ><a class="nav-link" href="">...</a></li>
<li ><a class="nav-link" href="">...</a></li>
<li ><a class="nav-link" href="">...</a></li>
</ul>
</div>
</div>
</nav>
</div>
jquery-ui:
$('#slidebutton').click(function(){
$('#navslide').toggle('slide');
})
The issue is related to an HTML ID Attribute, in the following element, it has two:
<div class="collapse navbar-collapse offcanvas-collapse" id="toggleMobileMenu" id="navslide">
When this is correct, the slide works as expected.
$(function() {
$('#slidebutton').click(function() {
$('#toggleMobileMenu').toggle('slide', {}, 500);
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container">
<a href="#" class="navbar-brand">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-label="Toggle navigation" id="slidebutton"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse offcanvas-collapse" id="toggleMobileMenu">
<ul class="navbar-nav ms-auto">
<li><a class="nav-link" href="">Item 1</a></li>
<li><a class="nav-link" href="">Item 2</a></li>
<li><a class="nav-link" href="">Item 3</a></li>
</ul>
</div>
</div>
</nav>
</div>
Related
I have followed the code from BootStrap as follows:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Nav Bar -->
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html">One Basket</a>
<button class="navbar-toggler ms-auto" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarToggleExternalContent2" aria- controls="navbarToggleExternalContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggleExternalContent2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</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>
I have also added the CSS from the bootstrap documentation and the javascript to the HTML file.
The JS is at the end before the close body tag, just like it says on the bootstrap website.
The CSS is the first link tag in the head.
But when I try to press the button nothing happens.
You have wrong attributes to make it work by default, just replace data-mdb-toggle="collapse" data-mdb-target="#navbarToggleExternalContent2" with data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent2", see (in my CodeSnippet I using BS v5.1):
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Nav Bar -->
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html">One Basket</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent2" aria- controls="navbarToggleExternalContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggleExternalContent2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</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>
After setting custom background for the nav-bar in bootstrap 4, I tried to put nav-toggler-icon for small screens. the nav-bar hamburger icon is not displayed but when I click the region it works fine. What can I do for it.
The html code is:
<nav id=header-nav class="navbar navbar-expand-md navbar-custom ">
<a href="index.html" class="navbar-brand">
<h1 class="tagline">Subha</h1>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#hamburger">
<span class=" navbar-dark navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="hamburger">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Cart</li>
<li class="nav-item">
Login</li>
</ul>
</div>
</nav>
the css code for nav bar is:
.navbar-custom
{
background-color: rgb(144,12,25);
border-radius: 0;
border: 0;
}
Try to change
data-target="#hamburger"
to
data-target="#navbarResponsive"
I hope this helps you! Otherwise take my own navbar template:
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<img src="img/logo.png" alt="Logo" />
<!-- dropdown btn -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<!-- nav-links -->
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
home
</li>
<li class="nav-item">
about
</li>
<li class="nav-item">
services
</li>
<li class="nav-item">
team
</li>
<li class="nav-item">
connect
</li>
</ul>
</div>
</div>
</nav>
Your <nav> is missing the color scheme color class, Which is what bootstrap uses to add the icon to the button.
The problem is you misplaced it, it should go on the <nav> not the <span>, It's only visible when you click it because the an outline as applied.
Demo
body {
zoom: 2;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="navbar-light bg-primary">
<span class="navbar-toggler-icon"></span>
</div>
<br>
<div class="navbar-dark bg-primary">
<span class="navbar-toggler-icon"></span>
</div>
Solution
.navbar-custom {
background-color: rgb(144, 12, 25);
border-radius: 0;
border: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<nav id=header-nav class="navbar navbar-expand-md navbar-dark navbar-custom ">
<a href="index.html" class="navbar-brand">
<h1 class="tagline">Subha</h1>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#hamburger">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="hamburger">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Cart</li>
<li class="nav-item">
Login</li>
</ul>
</div>
</nav>
So I'm creating a simple website with Laravela and Vue.js, and website to be responsive I added bootstrap 4. Everything works fine, navbar collapses when it should, and toggle button shows up and when I click it, it displays everything. But when I click the toggle button to hide navbar it just flickers and doesn't do anything.
<!--Navigation bar-->
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">website<span id = "EditorColorist">editor colorist</span></a>
<button class="navbar-toggler" data-toggle="collapse" data-target = "#collapsibleNavId">
<span class = "navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
<!--Navigation bar-->
And yes I added JS, Jquery before CSS.
I created a simple snippet for this to test and it the toggler on there works just fine for me. Feel free to try for yourself.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">website<span id = "EditorColorist"> editor colorist</span></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavId">
<span class = "navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
<!--Navigation bar-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
You could try checking your css to make sure that you don't have any classes that clash with those that bootstrap uses. I've seen that happen and cause issues with the way the navbar works.
I have a bootstrap navbar which expands at md breakpoint and is made of 2 submenus the collapsing of which is controlled by two buttons with navbar-toggler class.
I want to have my navbar to expand at md but one of my submenu (account) stay always toggled (button that trigger the content show under the navbar).
I'm not experimented with js but I guess it's possible to do it via a script. I've also seen in the source code that when the navbar expand the navbar-toggler get display:none which is a problem.
Here is my navbar and a js script to control the 2 submenus collapse:
$('#links').on('show.bs.collapse', function() {
$('#account').collapse("hide");
})
$('#account').on('show.bs.collapse', function() {
$('#links').collapse("hide");
})
<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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" 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>
<nav class="navbar fixed-top navbar-expand-md navbar-light">
<a class="navbar-brand" href="#">MYSITE</a>
<!-- links toggle -->
<button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- account toggle -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#account" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-user"></i>
</button>
<div class="collapse navbar-collapse" id="links">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="#">Home Page</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Prices</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Who are we</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse" id="account">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#">Sign up</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Sign in</a>
</li>
</ul>
</div>
</nav>
This part of your javascript $('#account').collapse() doesn't get executed because the account div is not yet loaded. Wait for it to load then execute the line, like this:
window.onload = function(){
$('#account').collapse();
}
it should do the trick.
$('#links').on('show.bs.collapse', function() {
$('#account').collapse("hide");
})
$('#account').on('show.bs.collapse', function() {
$('#links').collapse("hide");
})
$('#account').collapse()
<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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" 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>
<nav class="navbar fixed-top navbar-expand-md navbar-light">
<a class="navbar-brand" href="#">MYSITE</a>
<!-- links toggle -->
<button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- account toggle -->
<button class="navbar-expand-md" type="button" data-toggle="collapse" data-target="#account" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-user"></i>
</button>
<div class="collapse navbar-collapse" id="links">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="#">Home Page</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Prices</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Who are we</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
<div class="collapse navbar-toggleable-sm" id="account">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#">Sign up</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Sign in</a>
</li>
</ul>
</div>
</nav>
<header class="container">
<div class="container pt-3 col-md-5 col-sm-5 col-xs-6 text-center">
<img src="#">
<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>
<nav class="navbar navbar-expand-lg navbar-light bg-light col-xl-6 col-lg-7 col-md-9 container text-center">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">artwork</a>
</li>
</ul>
</div>
</nav>
</header>
The .navbar-toggler-icon does not appear on the .navbar-toggler button when the menu is collapsed for mobile responsiveness.
I want the Navbar button above the left
Use this body code only...... for your bootstrap.
<!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://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!--Main Navigation-->
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light col-xl-6 col-lg-7 col-md-9 container text-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<img src="#">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">artwork</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>