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).
Related
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')
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
The Problem: Navbar STARTS as open. On collapse, the links still show, only the background collapses. I've made sure I'm using transitions and I've got all the bootstrap javascript in there, the bootstrap css and some of my own styling on top, but nothing that I think would affect the navbar.
What it looks like default
What it looks likes closed
My Code:
<body>
<!--Navbar -->
<div class="contactUs">
<p>
<span class="glyphicon glyphicon-phone-alt"></span> 00000000
</p>
</div>
<!-- logo -->
<!-- end logo -->
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 main-logo pull-left" href="index.html">SX Storage Essex Benfleet</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
Self Storage
</li>
<li>
Business Storage
</li>
<li>
Prices
</li>
<li>
Packaging
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!-- End navbar -->
Thanks for your help, something was missing from bootstrap css. I just included the CDN. Not sure how that happened, I don't touch the bootstrap css - I'm going to put it down to zombie-mode late night keyboard mashing.
I am using Bootstrap to create a website and have a menu that displays icons in the menu. When the menu button is clicked, the text will go next to each icon and push the menu out to the left so the text can fit.
<div id="wrapper">
<div id="sidebar">
<a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div id="title-text">
<h3>Title</h3>
</div>
<!-- <div id="logo"> <img src="img/logo.svg" alt="logo" /> </div> -->
<nav id="nav" class="navigation" role="navigation">
<ul class="newnav">
<li class="active" data-section="1"><i class="icon-home"></i> <span>Home</span></li>
<li data-section="2" class=""><i class="icon-user"></i> <span>About</li>
<li data-section="3" class=""><i class="icon-laptop"></i> <span>Projects</span> </li>
<li data-section="4" class=""><i class="icon-pencil"></i> <span>Social</span> </li>
<li data-section="5" class="last"><i class="icon-envelope"></i> <span>Contact</span> </li>
</ul>
</nav><!-- /nav -->
</div><!-- /sidebar -->
At the moment, the spans expand to let the text in, it works fine but I would like it to be animated.
This is the majority of the code so far, although the live view isn't working.
JSFiddle
As you can see, when the top left button is clicked (.btn-navbar) the .expand CSS kicks in and changes the width from 0 to auto. I basically need the same thing but animated but cannot figure it out for the life of me.
Please can someone point me in the right direction?
Kind regards,
Tom
You can't animate to auto using CSS or native Jquery (at least when I last checked)
There is a JS/JQ method though
http://css-tricks.com/snippets/jquery/animate-heightwidth-to-auto/