Closing dropdown menu while opening another one in bootstrap - html

I have two dropdown menus residential and utility. When I click residential to open, it remains open but when I click utility, I want residential to close automatically.
Following is my code
<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.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/121f02bcc5.js" crossorigin="anonymous"></script>
<title>Hello, world!</title>
</head>
<body>
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Rami Villa
</li>
<li>
Alpine Metals Jafza
</li>
<li>
Home 3
</li>
</ul>
</li>
<li class="active dropright">
<a href="#utilitySubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Utility
</a>
<ul class="collapse list-unstyled" id="utilitySubmenu">
<li>
Future Pipes
</li>
<li>
Future Scaffolding
</li>
<li>
Future Electricity
</li>
</ul>
</li>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
At the moment the output is like this.
Actually I want it like this.


To make a collapse effect use this jquery code. This code removes class show by method removeClass().
Also, wrap the topmost <li> tag in the <ul> tag. Otherwise, this html is not valid.
$(".dropdown-toggle").on("click", function () {
$(".collapse.show").removeClass("show");
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/121f02bcc5.js" crossorigin="anonymous"></script>
<body>
<ul>
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Rami Villa
</li>
<li>
Alpine Metals Jafza
</li>
<li>
Home 3
</li>
</ul>
</li>
<li class="active dropright">
<a href="#utilitySubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Utility
</a>
<ul class="collapse list-unstyled" id="utilitySubmenu">
<li>
Future Pipes
</li>
<li>
Future Scaffolding
</li>
<li>
Future Electricity
</li>
</ul>
</li>
</ul>
</body>


here is the code without jquery. it's only with bootstrap
<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="#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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="homeSubmenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Residential
</a>
<div class="dropdown-menu" aria-labelledby="homeSubmenu">
<a class="dropdown-item" href="#">Rami Villa</a>
<a class="dropdown-item" href="#">Alpine Metals Jafza</a>
<a class="dropdown-item" href="#">Home 3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="utilitySubmenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Utility
</a>
<div class="dropdown-menu" aria-labelledby="utilitySubmenu">
<a class="dropdown-item" href="#">Future Pipes</a>
<a class="dropdown-item" href="#">Future Scaffolding</a>
<a class="dropdown-item" href="#">Future Electricity</a>
</div>
</li>
</ul>
</div>
</nav>


I have made some changes in your code, try this, hope this will work for you.
<div id="accordion">
<li class="active dropright">
<button class="btn btn-link" data-toggle="collapse" data-target="#homeSubmenu" aria-expanded="true" aria-controls="collapseOne">
residential
</button>
<ul class="collapse list-unstyled" id="homeSubmenu" data-parent="#accordion">
<li>
Rami Villa
</li>
<li>
Alpine Metals Jafza
</li>
<li>
Home 3
</li>
</ul>
</li>
<li class="active dropright">
<button class="btn btn-link" data-toggle="collapse" data-target="#utilitySubmenu" aria-expanded="true" aria-controls="collapseOne">
Utility
</button>
<ul class="collapse list-unstyled" id="utilitySubmenu" data-parent="#accordion">
<li>
Future Pipes
</li>
<li>
Future Scaffolding
</li>
<li>
Future Electricity
</li>
</ul>
</li>
</div>


I write a code hope it works for you:
$('.dropdowns').on('show.bs.dropdown', function () {
var currentDropdown = $(this);
$('.dropdowns').each(function () {
if($(this) !== currentDropdown && $(this).hasClass('open')) {
$(this).dropdown('toggle')
}
})
})


You can use .not() method to exclude the dropdown-toggle which clicked and then using same remove class and add attr to elements .
Demo Code :
//onclick of dropdown
$(".dropdown-toggle").on("click", function() {
//change attr of other..
$(".dropdown-toggle").not(this).attr("aria-expanded", "false")
//addclass of other..
$(".dropdown-toggle").not(this).addClass("collapsed")
//remove show class from others
$(".list-unstyled").not($(this).next("ul")).removeClass("show")
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/121f02bcc5.js"></script>
<ul>
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i> Residential
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Rami Villa
</li>
<li>
Alpine Metals Jafza
</li>
<li>
Home 3
</li>
</ul>
</li>
<li class="active dropright">
<a href="#utilitySubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i> Utility
</a>
<ul class="collapse list-unstyled" id="utilitySubmenu">
<li>
Future Pipes
</li>
<li>
Future Scaffolding
</li>
<li>
Future Electricity
</li>
</ul>
</li>
<li class="active dropright">
<a href="#utilitySubmenu2" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i> Utilit4y
</a>
<ul class="collapse list-unstyled" id="utilitySubmenu2">
<li>
Future Pipes2
</li>
<li>
Future Scaffo2lding
</li>
<li>
Future Electri2city
</li>
</ul>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

Related

Bootstrap Dropdown NavBar Button Not Working

I've been using Bootstrap to make a navbar, and the dropdown button hasn't been doing anything when I click on it. What could be the issue?
<!-- Website HEAD -->
<head>
<title> Celeb Live </title>
<!-- Website Meta's -->
<meta charset="UTF-8">
<meta name="Description" content="Meet Celebrities virtually live around the world!">
<meta name="Keywords" content="celeblive, Celeb Live, Meet Celeb">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Website CSS / Bootstrap / FONT AWESOME / AOS -->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="src/css/main.css">
</head>
<!-- Website BODY -->
<body>
<!-- Website Navbar -->
<nav class="navbar navbar-expand-md navbar-fixed-top ">
<a class="navbar-brand"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Celebs
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown" id="navbarDropdown">
<li><a class="dropdown-item" href="#">Music celebrities</a></li>
<li><a class="dropdown-item" href="#">Youtube celebrities</a></li>
<li><a class="dropdown-item" href="#">Hollywood celebrities</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Events
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown" id="navbarDropdown">
<li><a class="dropdown-item" href="#">Music artist live events</a></li>
<li><a class="dropdown-item" href="#">Youtuber live events</a></li>
<li><a class="dropdown-item" href="#">Hollywood live events</a></li>
</ul>
</li>
<li class="nav-item active">
<a class="nav-link" href="home.html">
<img src="https://raw.githubusercontent.com/ConstantineLinardakis/TSA-Webmaster-Challenge/main/src/assets/CelebLive.png" alt="CelebLive" height="90" width="100">
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">About
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown" id="navbarDropdown">
<li><a class="dropdown-item" href="#">About the team</a></li>
<li><a class="dropdown-item" href="#">About the program</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link login" href="#">Login</a>
</li>
</ul>
</div>
</nav>
<!-- Website CONTAINER-FLUID (CONTENT) -->
<div class="container-fluid">
<div class="container">
</div>
</div>
<!-- Website FOOTER -->
<footer class="page-footer">
<!-- fixed bottom here if needed and AOS -->
<div class="text-center">
<div class="footer-copyright">
© 2021 Copyright:
CelebLive.com
</div>
</div>
</footer>
<!-- Website JS Bootstrap/Popper/AOS -->
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
My theory :
I don't know if it is the navbar data-target, but changing that seemed to not do anything?
My burger does appear, but it does not have a function to when it is clicked? Could it be a JS problem, or a bad stylesheet link/script link?

Problem / Resolution : Bootstrap 5.0. data-bs-toggle and data-bs-target in navbar-toggler.
Fix :
<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">
<i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>
</button>

horizontal bootstrap 5 navbar with submenu

I'm using bootstrap 5.
In my navbar I want show menus horizantally like inserted picture.
show horizantally sub menus like this picture
I want to use submenu for other sub menus 4 level.
How should I do this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>horizantally sub menus</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-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<a class="nav-link active" aria-current="page" href="#">Home</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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<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>
</body>
</html>

Here you go with a solution https://jsfiddle.net/1s75buv9/5/
var pos = parseInt($('.linedUp').closest('.dropdown').position().left);
calcWidth = function(){
setTimeout(function(){
var width = 0;
var maxWidth = $(document).width() - pos;
$('.linedUp li').each(function(){
width += parseInt($(this).outerWidth()) + 2;
if( maxWidth < width){
width -= parseInt($(this).outerWidth());
}
});
$('.linedUp').css({
width: width
});
}, 0);
}
.linedUp > li{
display: inline;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
Link
</li>
<li>
Link
</li>
<li class="dropdown">
Dropdown<strong class="caret"></strong>
<ul class="dropdown-menu linedUp">
<li>
Action
</li>
<li>
Action 2
</li>
<li>
Something else here
</li>
<li>
Separated link
</li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
</div>
</nav>
I created using li, then calculated the width dynamically.
Edit:
To add an extra level of submenu, simply add .dropdown-submenu to any li in an existing dropdown menu.
For example:
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
You can further refer to Official Bootstrap Website for more on navbars!

How to get drop down in navbar to work in bootstrap

I can get the navbar to be visible, but the drop down menu in the navbar does not work -- when I click on the drop down menu it does not display the menu.
I got the source code from another Bootstrap website. But it is not working properly in my project.
HTML:
<nav class="mb-1 navbar navbar-expand-lg navbar-dark info-color" style="background-color: #293631; height: 2cm">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-4">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="https://www.facebook.com/madhusanka.edirimanna">
<i class="fab fa-facebook-f"></i> Facebook
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-instagram"></i> Instagram</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user" ></i> Profile </a>
<div class="dropdown-menu dropdown-menu-right dropdown-info" aria-labelledby="navbarDropdownMenuLink-4">
<a class="dropdown-item" href="#">My account</a>
<a class="dropdown-item" routerLink="/home">Log out</a>
</div>
</li>
</ul>
</div>
</nav>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler ml-auto" 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 active">
<a class="nav-link" href="https://www.facebook.com/madhusanka.edirimanna">
<i class="fab fa-facebook-f"></i> Facebook
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-instagram"></i> Instagram</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user" ></i> Profile </a>
<div class="dropdown-menu dropdown-menu-right dropdown-info" aria-labelledby="navbarDropdownMenuLink-4">
<a class="dropdown-item" href="#">My account</a>
<a class="dropdown-item" routerLink="/home">Log out</a>
</div>
</li>
</ul>
</div>
</nav>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
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>
</body>
</html>
First check if you have used the links properly. A suggestion to you is using jQuery.min CDN not the slim version that is provided on Bootstrap. I have faced lots of problems for that. Also to keep the button right aligned I gave .ml-auto on the button. If you want it to be left aligned simply remove the class. Hope it'll help

Bootstrap 3 Dropdown menu is not working

I have a little problem with my dropdown menu. I can't get it to work. I've been searching for a few hours already and still nothing.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-center">
<li> <img src="img/wts-logo.png" style="width:40px; height:40px;" alt="World Travel Show" /> </li>
<li aria-haspopup="true" aria-expanded="false" class="dropdown" ><a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#page-top">WORLD TRAVEL SHOW</a><span class="caret"></span>
<ul class="dropdown-menu">
<li>O TARGACH</li>
<li>SALONY</li>
<li>DOJAZD</li>
<li>DLA MEDIÓW</li>
</ul>
</li>
<li> <a class="page-scroll" href="podroznicy.html">PODRÓŻNICY</a> </li>
<li> <a class="page-scroll" href="#adoba">ATRAKCJE</a> </li>
<li> <a class="page-scroll" href="#harmonogram">HARMONOGRAM</a> </li>
<li> <a class="page-scroll" href="#dojazd">DOJAZD</a> </li>
<li> <a class="page-scroll" href="#salony">SALONY</a> </li>
<li> <a class="page-scroll" href="#dla_wystawcow">O TARGACH</a> </li>
<li> <a class="page-scroll" href="#wystawcy">WYSTAWCY</a> </li>
<li> <a class="" href="http://targi.kadryturystyki.pl/" target="_blank">SZKOLENIA</a> </li>
<li> DLA MEDIÓW </li>
<li> <a class="page-scroll" href="#contact">KONTAKT</a> </li>
<li> <a class="page-scroll hidden-xs" href="#contact" id="logopwe" style="display:none;"><img src="img/pwe-logo.png" alt="Ptak Warsaw Expo" style="height:40px; width:40px;" /></a> </li>
</ul>
</div>
CodePen

The <span class="caret"></span> has to be inside the dropdown <a>...</a> tag.
Change
<a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#page-top">WORLD TRAVEL SHOW</a> <span class="caret"></span>
to
<a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#">WORLD TRAVEL SHOW <span class="caret"></span></a>
Bootply
http://www.bootply.com/wS18cO4pfA

Here is how I use Bootstrap dropdown, and it works fine:
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Button</button>
<ul class="dropdown-menu">
<div>Something</div>
</ul>
</div>
Good luck!

Bootstrap material design input field doesn't animate

I am using Material Design for Bootstrap 3: http://fezvrasta.github.io/bootstrap-material-design/
So far, I only have the navbar and it looks good but the "Search" input field doesn't animate when I click inside it.
Nor does it give me the splash effect when I click on the dropdown menu.
Any idea what I'm missing?
<!-- Fonts -->
<link rel="stylesheet" href="{{ asset('assets/css/font-awesome.min.css') }}">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap-material-design.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/ripples.min.css') }}">
<body id="app-layout">
<div class="bs-component">
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ route('home') }}">APP</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a href="javascript:void(0)" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control col-md-8" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-btn fa-cog"></i>Settings</li>
<li><i class="fa fa-btn fa-cog"></i>Change Password</li>
<li><i class="fa fa-btn fa-sign-out"></i>Logout</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</div>
</div>
#yield('content')
<!-- JavaScripts -->
<script src="{{ asset('assets/js/jquery-2.2.4.min.js') }}"></script>
<script src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('assets/js/ripples.min.js') }}"></script>
<script src="{{ asset('assets/js/material.min.js') }}"></script>

The Ripples CSS and JS are missing, this is why you aren't seeing the "ripple" animation on your click events.
Docs: Getting Started
Working Example:
$.material.init()
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/ripples.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/js/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/js/ripples.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">APP</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
<a href="javascript:void(0)" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control col-md-8" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
NAME <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-btn fa-cog"></i> Settings
</li>
<li><i class="fa fa-btn fa-cog"></i> Change Password
</li>
<li><i class="fa fa-btn fa-sign-out"></i> Logout
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>