so I am getting this weird behavior with my bootstrap menu on my site. When I open up my app on a mobile device (iPhone 4S, iPhone 6 plus, Galaxy S4) or in the Chrome emulator, it shows me the full version of the menu:
But, when on my desktop browser, I resize the window, it starts working, even though the width is greater here than in the devices:
This is my code (I am using Bootstrap v3.2.0):
<nav class="navbar navbar-default" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="">
<ul class="nav navbar-nav">
<li><img src="<?php echo base_url('assets/img/logo.png');?>" id="mainLogo" /></li>
<li class="dropdown">
Red Bticino<b class="caret"></b>
<ul class="dropdown-menu">
<li>Crear Nueva Red</li>
<li>Unirse a Red</li>
<li>Abrir Red</li>
<li><a id="leaveNet">Dejar esta Red</a></li>
</ul>
</li>
<li class="dropdown">
Control del Hogar<b class="caret"></b>
<ul class="dropdown-menu">
<li>Dispositivos</li>
<li>Escenarios</li>
<li>Horarios</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-cog"></span>
<ul class="dropdown-menu">
<li>Configuración Horaria</li>
<li>Configuración de Red</li>
<li>Factory Reset</li>
<li class="divider"></li>
<li>Gestionar Usuarios</li>
</ul>
</li>
<li class="iconNav"><span class="glyphicon glyphicon-question-sign"></span></li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Do you happen to find something wrong with my html code? Thanks!
In your page's <head> section, add the following meta tag:
<meta name="viewport" content="width=device-width, user-scalable=no">
Here's a little bit on how the viewport works, according to Google Developers:
Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page's width and scaling on different devices.
Source: https://developers.google.com/speed/docs/insights/ConfigureViewport
Related
This is the example for a Bootstrap 3 collapsible navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="custom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<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>
<p class="navbar-text visible-xs-inline-block">Text Here</p>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
I want to change:
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
to my own hamburger-icon like this:
<span class="hamburger-menu"></span>
I want the hamburger-menu icon to look exactly like the other glyphicons bootstrap 3 normally uses (I beleave they use the halfling set and that they are 14x14 pixels, but I might be wrong about this...).
I also want to add an envelope glyphicon + a badge (telling the user how many unread messages he/she has) in the right part of the navbar, same as the hamburger-menu but to the left of the hamburger-menu icon and get it all to line up vertically.
I've tried the solution here: How to add text to bootstrap mobile menu but the text is added in the left part of the navbar, next to the brand. Also if I add glypicon and badge to it they look odd (not vertically aligned).
I have also not been able to figure out how to change the 3x icon-bars to my own hamburger. I have made my own icon (14x14pixels) and store it locally. I also have a custom.css that will add/overvrite the Bootstrap css. However I can't figure out what classes to manipulate and how.
Someone please help?
You can remove the spans:
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
and add your icon directly to the button class like so,
<button type="button" class="navbar-toggle hamburger-menu" data-toggle="collapse" data-target="#myNavbar">
</button>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel = "stylesheet" href="css/bootstrap-responsive.min.css">
</head>
<body>
<div class = "container">
<div class="navbar" >
<div class ="navbar-header">
<!-- Place your logo here -->
<div class="navbar-brand" >
<img src="images/logo.png" alt="logo text">
</div>
</div>
<button type="button" class="navbar-toggle navbar-right " data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"><hr><hr><hr></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class=" collapse navbar-collapse nav-collapse ">
<ul class="nav navbar-nav navbar-right">
<!-- Add require site page navigation -->
<li> <i class="icon-globe"></i>HOME</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" style="color:#000000"><i class="icon-user"></i>About Us<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>The Company</li>
<li>Vision</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" style="color:#000000"><i class="icon-user" style="color:#000000"></i>Team<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Meet Our Team</li>
<li>Our Sister concerns</li>
</ul>
</li>
<li><i class="icon-pencil"></i>Projects</li>
Refer
Contact Us
Web
Locate
</ul>
</div>
</div>
</div>
check the problem at www.alaknandainfra.com/refer.php the nav bar collapses suddenly in mobile view . i spent many hours but can't find the mistake . and i want to align the toggle menu on the right side . when user click on toggle button the menu should come on the right side
If you remove the height:0 at bootstrap-responsive.min.css:1240, that issue seems to be fixed.
.nav-collapse,.nav-collapse.collapse{
/* height:0; */
overflow:hidden
}
How might I display Bootstrap's collapsed, aka "Hamburger", menu by default but to have it on the left side of the browser?
I'm guessing that on the collapsed menu, I just change it to be as below?
<!-- the collapsing menu -->
<div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
If you want to create a navbar with a three line "hamburger" on mobile devices, just follow the official Bootstrap template. If you want to move the button to the left, just add a float: left to the css or use the class "pull-left" on the button. Do note that you will need to add some margin: left to make sure there's some spacing between the button and the left border.
Bootply example here
as martin mentioned you need a pull-left attribute for the hamburger to be on the left
with the code below the left hamburger only shows up when the screen is too small to show all the nav bar items
nav class="navbar navbar-inverse"> <div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed pull-left" 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" href="/">Slide Show</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Shutdown</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div> </div> </nav>
How can I make the submenu to align to the left side of the header??
I have tried .dropdown-menu-left. in the <ul> but it doesn't work.
Here is the code:
<div class="mainMenu">
<nav class="navbar navbar-sura" role="navigation">
<!-- 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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">Seguros para Autos
<ul class="dropdown-menu">
<li class="pruebamenu">Seguros para Autos</li>
<li class="pruebamenu">Centros de servicio</li>
<li class="pruebamenu">Asistencia</li>
<li class="pruebamenu">Te damos más</li>
<li class="pruebamenu">Acompañamiento satelital</li>
<li class="pruebamenu">Formación</li>
<li class="pruebamenu">Aliados</li>
<li class="pruebamenu">Promociones</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
It's hard to tell from your screen capture, but the dropdown might be doing that because the dropdown is near the right edge of the browser's viewport - Bootstrap 3 now "intelligently" positions tooltips and popovers inside the viewport if it detects it will render outside the browser's viewport. I suspect the same is true for dropdowns.
This made happen the alignment to the right:
<ul class="nav navbar-nav navbar-right">
I've changed to:
<ul class="nav navbar-nav navbar-left">
:)
I am using the Bootstrap 3.0 framework and Modern Business theme (http://startbootstrap.com/modern-business). When using the default Modern Business nav settings, the main menu dropdowns work brilliantly as they should on mobile devices. However, when I change the menu to be "nav-justified" in the HTML code (using Bootstrap's "nav-justified" CSS class), the menu does not work as expected.
When you tap any menu item with dropdowns, it shows a navigation dropdown on the far left side, which runs outside of the parent CSS frame:
I am also using the Sticky Nav solution found here: How to use the new affix plugin in twitter's bootstrap 2.1.0?
Here is my HTML code for the menu:
<nav class="navbar navbar-inverse" role="navigation">
<div id="nav-wrapper">
<div id="nav" class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<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>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav nav-justified">
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li class="dropdown">
Portfolio <b class="caret"></b>
<ul class="dropdown-menu">
<li>1 Column Portfolio</li>
<li>2 Column Portfolio</li>
<li>3 Column Portfolio</li>
<li>4 Column Portfolio</li>
<li>Single Portfolio Item</li>
</ul>
</li>
<li class="dropdown">
Blog <b class="caret"></b>
<ul class="dropdown-menu">
<li>Blog Home 1</li>
<li>Blog Home 2</li>
<li>Blog Post</li>
</ul>
</li>
<li class="dropdown">
Pages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Full Width Page</li>
<li>Sidebar Page</li>
<li>FAQ</li>
<li>404</li>
<li>Pricing Table</li>
</ul>
</li>
</ul>
</div> <!-- collapse -->
</div> <!-- span12 -->
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
</div> <!-- nav-wrapper -->
</nav>
And here is the script I have at the bottom of my HTML:
<script>
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});
</script>
Here, also, is the obligatory JSFiddle to examine (JS and CSS code linked in the JSFiddle panel on the left): http://jsfiddle.net/L94Mj/
I'm sure I'm somehow dancing around the answer, but this thing has had me stumped for two days now, and I need a fresh brain to look at things. I'm happy to provide whatever extra code is needed to help find the answer.