Bootstrap 3 When clicking dropdown menu navbar-collapse is closing - javascript

I have a basic Bootstrap 3 responsive nav like so:
<body data-spy="scroll" data-offset="0" data-target="#navbar-main">
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-custom navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span
class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<a class="navbar-brand" href="#"><strong>brand</strong></a></div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Homepage</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">page-1</a>
<ul class="dropdown-menu">
<li>page-1-1</li>
<li>page-1-2</li>
</ul>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
</body>
When I click the dropdown menu button in collapsed mode, navbar is closing and I cannot see the dropdown menu.
When I open nav:
and clicked Page-1:
It should open a dropdown menu below Page 1 but when I click Page-1 it closes nav. How can I solve this problem?

Related

Angular 5 sidenav

I'm trying to use a bootstrap side navbar.
<nav id="sidebar" [(class.slide-in)]="slideIn" >
<div class="sidebar-header">
<img alt="Home" height="65" src="/assets/images/angular-logo.png" title="Home" width="150" class="ng-star-inserted">
</div>
<ul class="list-unstyled components">
<p>Content</p>
<li id="sidebar-list" style="border:2px;">
<a [routerLink]="['/HistoryOfAngular']">History of Angular</a>
</li>
<li id="sidebar-list">
Hello World
</li>
<li id="sidebar-list">
Data Binding
</li>
</ul>-->
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<button (click)="toggleSidebar()" style="margin:0px;border-radius: 0px; height: 50px;" type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>MENU</span>
</button>
</div>
</nav>
I am toggling the side nav with some js code in tag but the script tag doesnt run in angular 5. How could I toggle it. I thought have some code in my .ts file like
toggleSidebar():void{
}
Im not sure of what to put in it to toggle it. The code to toggle in the script tag is
<script >
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
console.log("HII");
});
});
console.log("HII");
</script>
<nav class="navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<b>
<a class="navbar-brand" href="#">
Title
</a>
</b>
<button type ="button"
class ="navbar-toggle collapsed"
data-toggle ="collapse"
data-target ="#bs-example-navbar-collapse-1"
aria-expanded="false">
<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" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li routerLinkActive="active"><a routerLink="route1">Route1</a></li>
<li routerLinkActive="active"><a routerLink="route2">Route2</a></li>
<li routerLinkActive="active"><a routerLink="route3">Route3</a></li>
</ul>
</div>
</div>
</nav>
This is from https://bootswatch.com/darkly/

Bootstrap Navbar Dropdown not working (Not Responsive) on mobile

I have added a dropdown to my website but it is not working properly on mobile devices when the nav bar is collapsed. When I click on dropdown it closes the navbar instead of showing the items under the dropdown.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<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="#page-top">Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Portfolio
</li>
<li class="dropdown">
Games <span class="caret"></span>
<ul class="dropdown-menu">
<li>Avoid The Spikes</li>
<li>Space Shooter</li>
<!--<li role="separator" class="divider"></li>-->
<!--<li class="dropdown-header">Nav header</li>-->
<!--<li>Separated link</li>-->
</ul>
</li>
I think it has something to do with the ID <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

How to collapse navbar menu on click ONLY, not open, having trouble figuring this one out

Okay so I'm trying to create a navbar that collapses the hamburger menu when a link is closed. The problem is the method I'm using also opens the hamburger menu when I click a link. This is okay with all the regular links in the navbar. But I do not want this to happen with the navbar-brand. I need it to only collapse the menu when it's opened. However, even when the menu is closed the navbar-brand on click will open it.
here is the code, I tried all sorts of javascript but I think I need help with my specific situation.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#brand" data-target="#navbar"><img style="height:31px; width:170px;" src="images/img.svg"></a>
<!-- Start Collapse Button -->
<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>
<!-- End Collapse Button -->
</div>
<!-- Start Links -->
<div id="navbar" class="navbar-collapse collapse">
<!-- Left Links -->
<ul class="nav navbar-nav">
<li>IT</li>
<li>CLOUD</li>
<li>HIPAA</li>
<li>SECURITY</li>
<li>CONTACT US</li>
<li>ABOUT</li>
</ul>
</div>
<!-- End Links -->
</div>
You can hook up to the click event of the hamburger and reset the css classes on the menu
$('.navbar-brand').click(function() {
$('.navbar-toggle').attr('aria-expanded', false);
$('.navbar-toggle').addClass('collapsed');
$('.navbar-collapse').attr('aria-expanded', false);
$('.navbar-collapse').addClass('collapse');
$('.navbar-collapse').removeClass('in');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#brand" data-target="#navbar">
<img style="height:31px; width:170px;" src="http://lorempixel.com/170/31" />
</a>
<!-- Start Collapse Button -->
<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>
<!-- End Collapse Button -->
</div>
<!-- Start Links -->
<div id="navbar" class="navbar-collapse collapse">
<!-- Left Links -->
<ul class="nav navbar-nav">
<li>IT
</li>
<li>CLOUD
</li>
<li>HIPAA
</li>
<li>SECURITY
</li>
<li>CONTACT US
</li>
<li>ABOUT
</li>
</ul>
</div>
<!-- End Links -->
</div>

Bootstrap Vertical Menu Not Collapsing

I can't get a bootstrap vertical menu to collapse when using media queries.
There is too much code to put it all in here so I created a fiddle -
https://jsfiddle.net/DTcHh/
I don't mind re-writing the menu however it was the only way I could get this kind of menu. I am basing my technology off this website as this was the clients demand -
http://www.rhiwbeinaprm.co.uk/
I am trying to create their home page menu but in bootstrap so it is responsive. any help is greatly appreciated.
<div class="navbar">
<nav class="navbar navbar-default">
<div class="container-fluid"><div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="root">
</li><li class="dropdown-submenu"> <a tabindex="-1" href="#">Welcome</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Headteacher</a>
</li>
<li><a tabindex="-1" href="#">School Motto</a>
</li>
</ul>
</li>
</ul>
</div>
</div
The issue is, when scrolling below around 750px and below, the whole thing just disappears.
Where is the navigation button?
Add an id to: <div class="navbar-collapse collapse">
<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="#">Bootstrap 3</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
...
</div>
Update fiddle: https://jsfiddle.net/wZVanG/DTcHh/8623/
you have the following issues with your code:
You are duplicating something here by using a div and a nav both
with class navbar. I don't know why but that's weird.
Your collapsing div doesn't have id. the id will allow the button to target it for dropdown
The button that is supposed to hold the toggle for dropdown isn't in your code.
Since your collapsing div doesn't have an Id, your dropdown button wouldn't be pointing to anything
Your jsFiddle is different from the code posted here.... The following code is based on the one from your jsfiddle.
Working bootply
Your website takes a lot of time to load, to improve the user experience you might consider loading the js files after or creating a loading screen. The following code is for the navbar.
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
<button type="button" class="navbar-toggle collapsed" 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>
</div>
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown active">
Getting started <b class="caret"></b>
<ul class="dropdown-menu">
<li>Download Bootstrap</li>
<li class="divider"></li>
<li class="dropdown-header">Examples</li>
<li>Basic template</li>
<li>Starter template</li>
<li>Grids</li>
<li>Jumbotron</li>
<li>Navbar</li>
<li>Sign-in page</li>
<li>Sticky footer</li>
<li>Offcanvas</li>
<li>Carousel</li>
<li>Theme</li>
<li class="divider"></li>
<li class="dropdown-header">Compatibility</li>
<li>Migrating from 2.x to 3.0</li>
<li>Browser support</li>
<li>Third party support</li>
</ul>
</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Customize</li>
</ul>
</div>
</div>
<div class="jumbotron">
<h1>Twitter Bootstrap 3.0</h1>
<p class="lead">Starter template with CSS and JS included.</p>
<p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p>
</div>
</div>

twitter-bootstrap nav not toggling collapse

Here is my markup for my nav using bootstrap....
I'm not sure why the div with class of 'mynavbar' is not toggling open and close (by adding the 'in' class to it) when the button with a data-target='.mynavbar' is clicked (this is only on smaller screens where the hamburger type menu shows instead of the links "work, about, contact)
ALso, on large and small screens, should the li's that are clicked on have the class of "active" added to them? I'm not seeing this happen either
<nav class='navbar navbar-fixed-top drop-shadow'>
<div class='container-fluid'>
<div class='navbar-header page-scroll'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.mynavbar'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand page-scroll' href='#'><i class='glyphicon glyphicon-home'></i></a>
</div>
<div class='collapse navbar-collapse mynavbar'>
<ul class='nav navbar-nav'>
<li><a class='page-scroll' href='#work'>Work</a></li>
<li><a class='page-scroll' href='#about'>About</a></li>
<li><a class='page-scroll' href='#contact'>Contact</a></li>
</ul>
</div>
</div>
</nav>
You need to target to ID in <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">, instead of class. Then change the element that has collapse navbar-collapse class to <div class="collapse navbar-collapse" id="mynavbar">
Overall, this code should work for you
<nav class="navbar navbar-fixed-top navbar-inverse drop-shadow" role="navigation">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#">
<i class="glyphicon glyphicon-home"></i>
</a>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav">
<li class="active"><a class="page-scroll" href="#work">Work</a></li>
<li><a class="page-scroll" href="#about">About</a></li>
<li><a class="page-scroll" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
And, you can add class="active" to your <li> when clicked, this is often handled in the server-side or in your own URL router

Categories