We Keep Coding

Toggle not working on mobile device view - BS custom dropdown

Created a Bootstrap multi-level dropdown navbar with some custom jQuery & CSS.
But there is an issue with toggle open & close submenu in Mobile device.
Please take a look:
$('.dropdown').hover(function() {
$(this).children('.dm-lv1').toggleClass('show');
e.preventDefault();
});
$('.dropdown-submenu').hover(function() {
$(this).children('.dm-lv2').toggleClass('show');
e.preventDefault();
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-menu {
top: 0;
left: 100%;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.4);
}
.dropdown-menu {
top: 90%;
padding: 0;
border: 0;
border-radius: 0;
border-top: 2px solid #333;
background: #eee;
}
.dropdown-item {
padding: .5rem 1rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="#">Brand</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 ml-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<ul class="dropdown-menu dm-lv1 animate slideIn" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Dropdown Menu</a></li>
<li><a class="dropdown-item" href="#">Dropdown Menu</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Submenu Items</a>
<ul class="dropdown-menu dm-lv2 animate slideIn">
<li><a class="dropdown-item" href="#">Submenu action</a></li>
<li><a class="dropdown-item" href="#">Submenu action</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item active"><a class="nav-link" href="#">Clients</a></li>
<li class="nav-item active"><a class="nav-link" href="#">News</a></li>
<li class="nav-item active"><a class="nav-link" href="#">Contact US</a></li>
</ul>
</div>
</div>
</nav>
How can I toggle (open & close) this dropdown & submenu dropdown on click?

add e to your scripts function like this:
<script>
$('.dropdown').hover(function (e) {
$(this).children('.dm-lv1').toggleClass('show');
e.preventDefault();
});
$('.dropdown-submenu').hover(function (e) {
$(this).children('.dm-lv2').toggleClass('show');
e.preventDefault();
});
</script>

Trying do change background color of the hamburger button to other color, and click again it will change it to back to same color as unclick

I am trying to do mobile responsive design for top navigation button. I have this problem when user click on the hamburger button, the background color will change to orange which has the color code of #e2ae15 to any color for example red.
When user clicks again it will change back to the default color which is the color code of #e2ae15.
May I know what should I do to make it change color. I tried many ways for example using css called active and focused , but none make it desirably result. One of the best example I could find is this website: https://sutd.edu.sg/ but must be in mobile mode
My Codes:https://codepen.io/anon/pen/eMwJYv
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" id"a">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
CSS:
.navbar-toggle {
border: none;
//background: transparent !important;
border: 0;
float: left;
padding: 18px;
margin: 0;
border-radius: 0;
background-color: #e2ae15 !important;
cursor:pointer
/*&:hover {
//background: transparent !important;
background: #e2ae15 !important;
}*/
.icon-bar {
width: 22px;
transition: all 0.2s;
}
.top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.middle-bar {
opacity: 0;
}
.bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
&.collapsed {
.top-bar {
transform: rotate(0);
}
.middle-bar {
opacity: 1;
}
.bottom-bar {
transform: rotate(0);
}
}
}
.red{
background-color:red;
}

Add a class(named my-class) to the nav tag so that u dont need important. then use that class to target the button.
Add this to your css
.my-class.navbar-default .navbar-toggle,
.my-class.navbar-default .navbar-toggle:hover
{
background-color: red;
}
.my-class .navbar-toggle.collapsed,
.my-class .navbar-toggle.collapsed:hover{
background-color: orange;
}
this will override the default styling of bootstrap.
When the drawer is open, the collapsed class is removed,then u can target the navbar-toggle class.
Updated codepen link

Bootstrap Navbar - Add <hr> before and after links

I have a bootstrap navbar. When a dropdown is expanded I would like to add a line break line under the dropdown and the last item in the list.
I have made a Bootply and attached an image to illustrate what I'm trying to do.
Here is my jQuery.
$('.dropdown.open .dropdown-toggle').append('<hr class="break-sec-w">');

Your hr should be wrapped within a div to take effect.
I tried modifying your code--
Try the dropdowns
Example
$(document).ready(function($) {
$('.hr_line').append('<hr class="break-sec-w">');
});
.break-sec-w {
width: 40px;
border-top: 1px solid red;
margin-top: 10px !important;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li><div class="hr_line"></div></li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
<li><div class="hr_line"></div></li>
</ul>
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li><div class="hr_line"></div></li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
<li><div class="hr_line"></div></li>
</ul>
</li>
<li class="dropdown">
Dropdown 3 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li><div class="hr_line"></div></li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
<li><div class="hr_line"></div></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div> <!-- /container -->
</body>
</html>

You could try CSS styling. nth-child
.nav> li:nth-child(2),
.nav> li:nth-child(7) {
content: "<hr>"
}
You may need to change the classes which i have used in the example.

You can override some css if you need some extra styling such as:
.navbar-nav .open ul.dropdown-menu{
border-radius:0px;
border:solid 1px red;
border-width:1px 0;
}
Updated Bootply.

You could do that in many ways, but i'm pretty sure that you shouldn't use hr for that. Underline effect done via border, or after selectors will do the job :)
Examples with border:
Class for the element that needs to be separated from the rest and then css for that like
.classname{
border-bottom: 1px solid #colorHex;
}
Select certain elements that needs to get the underline effect:
.nav>li:nth-child(2),
.nav>li:nth-child(7){
border-bottom: 1px solid #colorHex;
}
Example with the after selector:
.className{
position: relative;
}
.className:after{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #yourHex
}
Hope it helps :)

Here is solution using :after pseudo-element:
No javascript
.navbar-nav .open .dropdown-toggle:after {
content: ' ';
width: 10%;
height: 1px;
background-color: red;
display: block;
margin: 5px auto;
}
here is bootply

Here's a version based on your code, using just border:
/* CSS used here will be applied after bootstrap.css */
hr.break-sec-w {
width: 40px;
/* color: #fff !important; */
border-top: 1px solid #fff;
margin-top: 10px !important;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
color: #555;
background-color: transparent;
}
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
text-align: center;
}
.navbar-nav {
margin: 7.5px -15px;
text-align: center !important;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
color: #555;
background-color: transparent;
}
#navbar a{
display: inline-block;
}
.dropdown>a {
border-bottom: 1px solid #f00;
display: block;
}
.dropdown li:last-child a{
border-bottom: 1px solid #f00;
}
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Dropdown 3 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<!-- /container -->

How to adjust drop-down menu item in <ul> with the use of css columns property?

I am using 2-column navigation menu in my website. with the use of following css
.column-menu {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
width: 378px;
}
i am getting this output:
This is perfect as i want it to be. But, when i open the drop-down menu, it becomes like this:
is there anyway to get the output as displayed in the following screenshot:
Here is my full html:
.column-menu {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
width: 378px;
}
.column-menu li a {
padding: 0 15px;
font: 13px/38px"Kanit", sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
}
.column-menu li a:hover,
.column-menu li a:focus {
background: none;
}
.column-menu li.active a {
color: #333;
}
.column-menu li.open a {
background: none;
}
.column-menu li.open a:hover,
.column-menu li.open a:focus {
background: none;
}
.column-menu li.open a span {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.column-menu li.open ul {
background: none;
position: relative;
margin: 0;
margin: 0;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
<ul class="nav column-menu black-bg">
<li class="active dropdown">
Home <span class="caret"></span>
<ul class="dropdown-menu">
<li>Home Option 1</li>
<li>Home Option 2</li>
<li>Home Option 3</li>
<li>Home Option 4</li>
<li>Home Option 5</li>
<li>Home Option 6</li>
</ul>
</li>
<li>About</li>
<li>categories</li>
<li>archives</li>
<li>Products</li>
<li>faq</li>
<li>contact</li>
</ul>

This is may help you...read this code fully and work it and sure you will get it..
HTML :
<nav class="navbar navbar-default" 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>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
One Column <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Two Column <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here that's extra long so we can see how it looks</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown">
Three Column <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Link</li>
</ul>
</div>
<!--/.navbar-collapse-->
CSS :
The noteworthy CSS here is the min-width properties for the .columns-2 and .columns-3 ul‘s. These are necessary to keep the menu from doing some wild stuff… but, there are certainly other approaches. I also added some CSS for the .multi-column-dropdown ul‘s so they match Bootstrap’s styling.
*Note: be sure to include bootstrap.css in your head as well.
.dropdown-menu {
min-width: 200px;
}
.dropdown-menu.columns-2 {
min-width: 400px;
}
.dropdown-menu.columns-3 {
min-width: 600px;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
}
.multi-column-dropdown {
list-style: none;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
#media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
JS:
Just be sure to include jQuery and Bootstrap in your page (preferably towards the bottom, right before the closing body tag).
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
first use this code in rough manner and you will get an idea

Bootstrap 3 navigation list items hover issue

I have tryed this example:
html
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<h1>Home</h1>
css
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
}
http://jsfiddle.net/bdd9U/3/
from this page: Center content in responsive bootstrap navbar
and i wanted to add hover effect to nav list items like so:
http://jsfiddle.net/bdd9U/560/
but at the bottom it has some extra height and the hover effect cant take enough space. If we resize the screen to mobile size we can see that the header height is reduced by about 5px from the bottom. How to repair this issue?

It looks like display: inline-block is adding space after the navbar elements.
You can set a fixed height for the navbar.
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
height: 45px; /* Add */
}
}
Updated JSfiddle