For some reason, my accordion pushes up my header when it is active. I am wondering the best way to go about fixing this, is it possible to add a class to the header when the accordion is active to move it's position down (margin-top)?
I am using the default bootstrap.js and jquery.js files. Here is my HTML:
<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="#">
<img class="header-logo" style="" src="">SF</a>
</div>
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Retrospective
</li>
</ul>
</div>
These images are the header with the accordion active/normal.
Related
I'm building a small website and I'd like to hide the mobile navbar after a link is clicked.
I've found some similar questions in this forum: tried hide() and slideup() but it works for the very first link clicked, then I can't re-open my navbar.
The idea is to automatically close the navbar once a link is clicked to simplify and make the website more pleasant.
Here the html of my navbar:
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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 class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav ">
<li><a class="click" href="./index.html" title="">01 : Home</a></li>
<li><a class="click" href="#thedavid" title="">02 : The Project</a></li>
<li><a class="click" href="#aboutus" title="">03 : About us</a></li>
<li><a class="click" href="#roadmap" title="">04 : Our Goal</a></li>
<li><a class="click" href="#faq" title="">05 : Faq</a></li>
</ul>
</div>
</div>
</nav>
document.getElementById('sr-only').addEventListener('click',myFunction)
function myFunction(){
let nav=document.getElementById('navbar-collapse')
if(nav.style.display=="" || nav.style.display=='block')
nav.style.display = 'none'
else nav.style.display='block'
}
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span id="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav ">
<li><a class="click" href="./index.html" title="">01 : Home</a></li>
<li><a class="click" href="#thedavid" title="">02 : The Project</a></li>
<li><a class="click" href="#aboutus" title="">03 : About us</a></li>
<li><a class="click" href="#roadmap" title="">04 : Our Goal</a></li>
<li><a class="click" href="#faq" title="">05 : Faq</a></li>
</ul>
</div>
</div>
</nav>
I have tried multiple solutions surrounding this issue which I have found on stack but I still can't seem to solve my particular issue. this is what I am working on http://dev.joneslewis.co.uk/. As you can see, in mobile view the hamburger menu doesn't collapse once opened whether I click on li element or the menu itself. As the site is based on anchors it's a real pain...
Here is the html I am currently working with and the Js...
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<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" rel="home" href="#">
<img class="img-responsive" style="max-width:35px; margin-top: -7px;"
src="#"/>
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#about">About</a></li>
<li><a a data-toggle="collapse" data-target=".navbar-collapse" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
Javascript...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://joneslewis.co.uk/bootstrap/jquery.js"></script>
<script src="http://joneslewis.co.uk/bootstrap/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$(".navbar-nav li a").click(function(event) {
$(".navbar-collapse collapse").collapse('hide');
});
});
</script>
It appears the selector is incorrect. I tried this and I was able to select the component and hide the menu.
$(".navbar-collapse.collapse").collapse('hide')
Hello all,
I am trying to make a navbar disappear after being clicked (It also has a sub menu dropdown). I tried using this (in fact it worked for a while but now does not). Any help would be appreciated, David
<script type="text/javascript">
<!--Make the menu collapse on option click in mobile mode-->
jQuery(document).ready(function () {
jQuery(".nav .dropdownmenu, .navbar-header .dropdownmenu").click(function(event) {
// check if window is small enough so dropdown is created
jQuery(".navbar-collapse").removeClass("in").addClass("collapse");
});
});
</script>
This is the dropdown menu
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<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>
<img src = "images/logo.png" height="30px" style="margin-top: 10px; margin-left: 5px;">
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdownmenu active">Home</li>
<li class="dropdownmenu">Sales</li>
<li class="dropdownmenu">Lettings</li>
<li class="dropdownmenu">Financial Services</li>
<li class="dropdown">
Branches <span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdownmenu" data-toggle="modal" data-target="#northwichModal"><a >Northwich</a></li>
<li class="dropdownmenu" data-toggle="modal" data-target="#middlewichModal">Middlewich</li>
<li class="dropdownmenu" data-toggle="modal" data-target="#winsfordModal">Winsford</li>
<li class="dropdownmenu" data-toggle="modal" data-target="#lettingsModal">Northwich Lettings</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
I have problem, with navbar toggle in twitter bootstrap 3 on small screens (when collapse button appears),
everything looks fine i think, when i execute my code on jsfiddle collapse button works, but in my asp net mvc project menu dropdown doesnt appear when i click on button,
heres code:
<nav class="navbar navbar-default scrollMenu" role="navigation">
<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>
<a class="navbar-brand" href=""></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" id="scrollTarget">
<ul class="nav navbar-nav pull-right">
<li class="active"><i class="fa fa-home"></i>1</li>
<li class=""><i class="glyphicon glyphicon-star">2</i> </li>
<li class=""><i class="glyphicon glyphicon-stats">3</i> </li>
<li class=""><i class="glyphicon glyphicon-ok"></i>4 </li>
<li class=""><i class="fa fa-bullhorn fa-1"></i>5</li>
<li class=""><i class="glyphicon glyphicon-globe"></i>6 </li>
</ul>
</div>
</nav>
I'm having some problem with a Bootstrap menu.
I want to collapse menu after clicking one of the section instead.
HTML:
<div class="container" id="home">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<!-- 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 class="active">HOME</li>
<li>PHILOSOFY</li>
<li>KNOWLEDGE</li>
<li>EXPERIENCE</li>
<li>INTERESTS</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
I've created this fiddle:
http://jsfiddle.net/kHhgw/
You can utilize the data-toggle="collapse" and data-target="#bs-example-navbar-collapse-1" attributes in your link elements in addition to the menu button.
So from your example:
<a data-toggle="collapse" data-target="bs-example-navbar-collapse-1" href="#philosofy">PHILOSOFY</a>
Updated fiddle: http://jsfiddle.net/kHhgw/1/