Develop Reference

HTML collapsed menu doesn't close then click on link

Just checked my website via phone, and noticed that the page navigation menu does not closing then pressing any link. And i cant understand why and there is the problem. Cant find the cause of the problem... I am looking at the scrip code below to understand but...
site: www.scorpion3d.com
This is whole menu block which i have:
<div class="menu-block">
<!-- Container -->
<div class="container">
<!-- Ownavigation -->
<nav class="navbar ownavigation">
<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="index.html"><span><img src="assets/images/logo.png" alt="logo" height="64" width="64"></span>Scorpion3D</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">PRADŽIA</li>
<li>PASLAUGOS</li>
<!-- <li>Features</li> -->
<!-- <li>DARBAI</li> -->
<li class="dropdown">
Blog
</li>
<li>KAINORAŠTIS</li>
<li>APIE MUS</li>
<li>KONTAKTAI</li>
</ul>
</div>
<div id="loginpanel" class="desktop-hide">
<div class="right" id="toggle">
<a id="slideit" href="#slidepanel"><i class="fo-icons fa fa-inbox"></i></a>
<a id="closeit" href="#slidepanel"><i class="fo-icons fa fa-close"></i></a>
</div>
</div>
</nav><!-- Ownavigation /- -->
</div><!-- Container /- -->
</div><!-- Menu Block /- -->

The drop down menu opens and closes properly on a resized monitor on my side. Try clear your cache. It could be that or possibly you have linked your bootstrap and jquery files wrong.
Include your jquery file first, then bootstrap both in the footer. Ensure nothing is in the header, or that duplicates are present.

You have a wrong path for jquery.min.js (404).
Make sure the script jquery.min.js is in the assets/js folder.

the correct answer was to include some additional code to html or js,
in this case I chose to include to HTML instead of:
<li class="active">PRADŽIA</li>
changed to all links like per example:
PRADŽIA</li>
Now mobile version menu close instantly then any link in the menu pressed.
don't forget to add after menu end single div:
<div class="collapse" id="navbar"></div>

Dropdown Menu Toggle not working on iPhone

I have the below menu + toggle button works great on any browsers on Android but iOS....
I can click on the button then the menu will show up & hide right away after showing.
I used a lot of work-around & fix, disable touchstart in bootstrap.js or changing z-index of navbar. . . but it won't help me anyway with this problem.
The menu seems to show up after click the toggle button but I can't see anything. I have to touch the toggle button again as closing the menu & touch again to open the menu again.
You guy can have a check if you have iPhone at http://getheadsup.com/
Thank you for your concern about my problem.
<div id="header-wrapper" class="header fadeIn">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid row">
<div class="navbar-header">
<a class="navbar-brand" href="index.html#top"></a>
</div>
<div class="navbar-footer">
<a href='order.php' class='navbar-preorder'>PRE ORDER</a>
<!-- hamburger icon -->
<button type="button" class="navbar-toggle collapsed menu-btn">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<!-- <span class="icon-bar middle-bar"></span>-->
<span class="icon-bar bottom-bar"></span>
</button>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="collapse navbar-collapse main-menu">
<ul class="nav navbar-nav">
<li>
Alexa</li>
<li>
Technology</li>
<li id="spin">
Tech Specs</li>
<li>
FAQ</li>
<li>
Blog</li>
</ul>
</div>
</div>
</div>
</div>
</div>

Take a look at
<div class="collapse navbar-collapse main-menu">
The size is almost nothing, height = 1px.
Since it contains the menu, nothing get displayed.
I don't know what CSS is going in there, but to see it working just set it to overflow: visible
Thats probably a workaround as it might cause issues elsewhere.
To solve it the right way the container need to have its children participating in the layout flow (e.g: not doing position:absolute or float: right/left).

the problem seems to be in the container (div.main-menu). it's positioned as fixed with no height or width.
try to add height and width to it.
#header-wrapper .navbar .container-fluid .navbar-collapse {
height: 100%;
width: 100%;
}
this worked for me.

I had the same issue in iOS and fixed it by changing the button class collapsed to the following jQuery code:
$('your_section_class').toggleClass('collapse')

When I open website on mobile bootstrap navbar is not collapse

This situation is strange. When I open my website (built on bootstrap) on small screens navbar is visible, but it should be collapse. When I click on button to collapse, it is still visible, when I click second time it is collapse just now. And since that it works good. But when I reload page, I still have this issue.
<div class=container>
<!--MENU-->
<nav style="border-bottom:1px solid #000;">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed menu_button" data-toggle="collapse" data-target=".nbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container nbar">
<ul class="nav nav-justified">
<li><a href=#>o nas</a></li>
<li><a href=#>galeria</a></li>
<li><a href=#>blog</a></li>
<li><a href=#>kontakt</a></li>
</ul>
</div>
</nav>

Add the class collapse in classes to your nav element. This way it will still be visible on mobile but the button will work like expected. If you only apply collapse as class and set the aria-expanded to false it will not be visible on mobile (but most likely also not in normal view).
<div class="container nbar collapse in" aria-expanded="true">
<ul class="nav nav-justified">
<!-- li's here -->
</ul>
</div>

Javascript Dom Focus is blocked by Bootstrap Navigation Bar

Spent a few days searching on how i could "edit" the Javascript focus method to work.
What i did was to use a bootstrap fixed navigation bar, in which i had to use padding-top: 70px on the body in CSS so that my body content is not hidden behind the navigation bar.
However if i try to do an focus on a text input due to validation purposes, the focus method focuses on the text input but it is hidden behind the navigation bar.
Navigation Bar code
<!-- Navigation -->
<div class="row">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- 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="#">C-Tru</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>
Testing
</li>
<li>
Submissions
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
I was using the following CSS settings
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
In the Body i did the following (modified to make it simple)
<div class="container">
<div class="row">
<form class="form-horizontal">
<div class="col-md-4">
<div class="form-group">
<label for="semester" class="control-label col-xs-3">Date</label>
<div class="col-xs-9">
<input type="input" class="form-control" id="semester" placeholder="eg. yyyymmdd">
</div>
</div>
<div class="form-group">
<label for="testingcode" class="control-label col-xs-3">Test Code</label>
<div class="col-xs-9">
<input type="input" class="form-control" id="testingcode" placeholder="eg. UAT1">
</div>
</div>
<div class="form-group">
<label for="subject" class="control-label col-xs-3">Subject</label>
<div class="col-xs-9">
<input type="input" class="form-control" id="subject" placeholder="eg. Chinese">
</div>
</div>
</div>
</div>
</div>
What happened was that i did a javascript to on focus testing code, however testing code was focused, but i had to scroll up to so that it is no longer hidden behind the navigation bar. (I had alot of other controls in the exact one that i am trying to build so i needed to scroll down)
I looked up the issue and found several other options that people suggested
From Bootstrap css hides portion of container below navbar navbar-fixed-top
Last post, seemed like it had an answer to resizing, but it does not seem to help with the focus portion.
Hope this is not too hard to understand, would try to capture a video and share it so that it could help with my explanation

Hiding button after collapse is toggled in bootstrap

Given the following code from the bootstrap website for the collapse functionality:
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
What I would like to do is hide the link, that invokes the collapse functionality once its open, does anyone know of a way I can do this without adding additional Js?

I used this to hide the button after it was clicked:
HTML (just added a class "hide-me"):
<button class="btn btn-default hide-me" data-toggle="collapse" data-target="#search" id="search-display">My Button</button>
CSS:
.hide-me[aria-expanded="true"] {display: none;}

This is what I was really looking for', without any CSS or JavaScript of my own, simply leveraging Bootstrap:
<a class="btn btn-primary hook in" data-toggle="collapse" href=".hook" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<div class="collapse hook">
<div class="well">
...
</div>
</div>
Heres the fiddle:
http://jsfiddle.net/hptrpaxh/1/

Add this:
$('.btn').toggle();
I recommend you add an additional class to this button or give it an id to distinguish it from other buttons.

Sorry didn't see you were trying to do it without extra js.
Here's an easy CSS trick. You can obviously modify it as well
give the button a class like hidden-button
Then use this CSS
.hidden-button {
position:relative;
z-index:0;
}
.well {
position:relative;
margin-top:-33px;
z-index:10000;
}
Here's a fiddle http://jsfiddle.net/cp5Lvtdo/4/

This can be done in Bootstrap 5 (and presumably 4) using the native Accordion functionality. Place the button and the content in separate accordion item elements, and set the parent on the collapsible content per the docs.
Notice that I've hidden the accordion item borders with b-0.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="accordion m-4" id="accordionArea">
<div class="accordion-item border-0">
<div class="accordion-collapse collapse show">
<button class="btn btn-primary" role="button"
data-bs-toggle="collapse" data-bs-target="#content"
aria-expanded="false" aria-controls="content">Toggle button & content
</button>
</div>
</div>
<div class="accordion-item border-0">
<div id="content" class="accordion-collapse collapse"
data-bs-parent="#accordionArea">
<div>Some content.</div>
</div>
</div>
</div>
<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>

If you would like to be able to collapse the content and show the link again without reloading the page you can wrap the whole content section (your <div>) in the <a> element.
Place some link content before the actual collapsible content and give it a class or id. Then add a custom CSS class to the <a> tag as explained in the previous answer but add a child selector like this:
.toggle-hide[aria-expanded="true"] > /* your link content class or id here */ {
display: none;
}
This will make the link less visible but you'll be able to click the content itself to collapse it and show back just the link.