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')
Related
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>
I am quite new to bootstrap. I am trying to develop quite a minimalistic site and I only got 3 menu items: my image logo, one link and one button. My menu is collapsing when using mobile which shouldn't be necessary as all three items should fit a small screen. Could someone please help me understand how I can disable the collapse but keep the menu responsive?
This is my code:
<div class="navbar navbar-inverse 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="#"><img src="images/logo.png"/></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Kom igång</li>
<li>
<p class="navbar-btn">
<strong>Kundinlogg</strong>
</p>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Thanks alot in advance!
Jacob
--you should have to remove collapse from
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target=".navbar-collapse">
<div class="collapse navbar-collapse">
or you can use
.navbar-collapse, .navbar-collapse.collapse {
overflow: visible;}
.navbar-toggle {
display: none;}
--also you can check This answer will help you well about disabling collapse and keeping your menu responsive
Prevent menu from collapsing in 768px display CSS media query
I am designing a webpage using bootstrap in which was working on navigation bar where I am trying to use 3 bars button and open the menu items on button click and close doing the same using the following code
<a id="menu-toggle" href="#menu-toggle" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li> Home</li>
<li> Dashboard</li>
<li> Resources</li>
<li> Contact Us</li>
<li><a href="#loginModal" data-toggle="modal" >Login</a></li>
</ul>
</div>
</div>
</div>
using the above it displays complete navigation when the window is on maximum size and three bars are only visible when window size is reduced.
how can I make the three bars aligned to the right corner and show menu items on clicking it?
DEMO:Fiddle
Is this what you are looking for?
From http://getbootstrap.com/components/#navbar:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
I'm having an issue with my Bootstrap navbar button not showing the dropdown links when the screen is collapsed.
I have a navbar brand that hides on collapse but ever since i added a scrolling nav plugin my links dont show in dropdown. It is is also acting strangely in that if the page is below the level of the top section clicking the button just scrolls up to the top yet i cannot see what the conflict is.
here is a fiddle:
jsfiddle
My HTML is like so:
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div id="twitterbootstrap">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand hidden-desktop page-scroll" href="#page-top">BrandHidden</a>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="brand visible-desktop page-scroll" href="#page-top">BrandVisible</a></li>
<li><a class="page-scroll" href="#page-top">Home</a></li>
<li><a class="page-scroll" href="#about">Link 1</a></li>
<li><a class="page-scroll" href="#services">Link 2</a></li>
<li><a class="page-scroll" href="#contact">Link 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
</body>
Any ideas would be greatly appreciated.
Edit: its complicated to me.... dont laugh im only new ;)
The problem is in your custom css. In the rule that you added for .hidden-desktop you added position: relative. I'm not sure why you need position relative anyway but what it's doing is capturing the click event for the entire navbar. You can see this by adding pointer-events: none to the rule and it will magically work.
The pointer-events property in css basically says to allow the mouse to penetrate the layers of your design and register click events on things that are otherwise obstructed by some higher layer. Although adding pointer-events: none works to demonstrate the problem here, it only has IE support in version 11, so I recommend removing the position: relative property. There is no logical reason I can think to have position set given that the display is set to none.
.hidden-desktop {
display: none !important;
position:relative; /*remove this*/
}
Here's the updated fiddle: http://jsfiddle.net/jme11/m3m99fhr/7/. I linked the Bootstrap files now in the external resources so that you can see it working in fiddle itself.
How about bootstrap.css?
Try this one:http://jsfiddle.net/iboylmz/McHUc/41/
I have the following code (full source of page):
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<span class="brand" href="#">Test</span>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="{% active request "^/$" %}">Home</li>
<li class="{% active request "^/about$" %}">About</li>
</ul>
<form class="navbar-search pull-right">
<input type="text" class="search-query" placeholder="Search...">
</form>
<div class="navbar-form pull-right">
Log in
Sign up
</div>
</div>
</div>
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
</div>
When loaded as a desktop, I get this:
Note that the "Log in" and "Sign up" buttons are BEFORE the search bar.
However, when I resize the browser, and the navbar responds I get this:
Now, the "Log in" and "Sign up" buttons are AFTER the search bar. This is because they are pull-right elements.
I've tried wrapping the buttons and search bar in a float: right parent div. This causes them to stay in the right order, but results in them being weirdly off to the side. This is undesirable. Does anyone have a solution that causes their order not to be reversed?
The problem is that the floats on navbar-form and navbar-search are set to none once the nav-collapse logic kicks in. Instead of relying on floats, play around with display: inline-block. The following seems to work reasonably (you should create your own classes instead of applying styles inline):
<div class="pull-right">
<!-- .btn's already have display: inline-block so don't need to apply it manually -->
<!-- margin-left: 15px is applied so that the buttons align with the
search field -->
<a style="margin-left: 15px;" href="#" class="btn">Log in</a>
Sign up
<form class="navbar-form" style="display:inline-block">
<input type="text" class="search-query" placeholder="Search...">
</form>
</div>
Navbar's no longer use .pull-left or .pull-right, but rather .navbar-left and .navbar-right. This avoids issues with specificity due to chaining classes and enables easier styling.
See http://blog.getbootstrap.com/2013/08/13/bootstrap-3-rc2/