How can I implement Bootstrap Navbar Expand/collapse mobile without JavaScript?
I try like below but when I deactivate javascript from Browser, the Hamburger Menu is no more working.
<div class="container-fluid" id="page">
<div class="sidebar span3">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<style><input:checked + .nav-collapse {height: auto;}</style>
<a>
<label class="btn btn-navbar" for="checkbox">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</label>
</a>
<input type="checkbox" id="checkbox" style="position: absolute; opacity:0;" />
Dictionary
<div class="nav-collapse" />
<ul class="nav">
<li class="active">Search</li>
<li>Phrases</li>
<li>Tools & Downloads</li>
<li>News</li>
<li>About</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</div>
</div>
</div>
</div>
many thanks in advance.
bootstrap navbar is based on JavaScript so you cannot do this without enabling javascript but you can search for css navbar instead , http://codepen.io/Akhilr/pen/xwEvQz
like this http://codepen.io/Akhilr/pen/xwEvQz
Related
Using bootrap nav-fix top, In mobile mode the fixed navigation bar scrolls using the carousel, only in mobile mode this happens
i try fix with css change but no sucess
i dont know to fix that, thanks for help
Exemple
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
</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 navbar-right">
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#fotos">Fotos</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contato</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Galeria Section -->
<section id="fotos" class="bg-light-gray">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Galeria de Fotos</h2>
<br>
</div>
<div class="row">
<div class="carousel slide article-slide" id="myCarousel">
<div class="carousel-inner cont-slider">
<div class="item active">
<img src="http://placehold.it/1200x440/cccccc/ffffff">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>$('#myCarousel').carousel({
interval: 4000
});
</script>
You Can use the following media queries its work fine for your issue.
#media (max-width:767px) { .navbar-static-top { position: fixed; bottom: 0; left: 0; width: 100%; margin: 0; } }
In mobile version I need to have logo and navbar in one row, but then navbar content is too small (texts are on two rows, one row will be much better). Can I do something to increase width on 100%?
I create jsfiddle here
http://jsfiddle.net/8ayj7o36/
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-3">
<img src="../img/logo.png" alt="" class="" />
</div>
<div class="col-xs-4 col-sm-4 col-md-9">
<!-- Static navbar -->
<div class="navbar navbar-default">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Link dfa dfa dfdf</li>
<li>Link bbbb bbb bb</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Thanks for any help!
Put the <a> tag corresponding to your logo within the navbar-header, so that everything falls in single line. Now it is for you to adjust col-group according to your requirement. This is your modified Fiddle
<div class="navbar-header">
<img src="../img/logo.png" alt="logo" class="" />
-
-
-
</div>
I'm using bootstrap to make a blog. Put a navbar that is functioning properly on the desktop, when it gets to a smaller screen size, scroll the navbar.
When trying to do the same process on a mobile, scroll the navbar does not work.
Below the image as it is.
The blog url: www.sesmt.org
http://i.stack.imgur.com/0ZbcW.png
Code in Jsfiddle
http://jsfiddle.net/mtsys/Qs4zw/
<div class="col-md-3">
<div class="sidebar-nav">
<div class="navbar navbar-default navbar-inner" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-sm visible-xs navbar-brand">Menu Clique para abrir</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dados">Principal</li>
<li>Home</li>
<li>Contato</li>
<li>Últimas Atualizações</li>
<li>Mapa do Site</li>
<li>Precisa de ajuda?</li>
<li class="dados">Geral</li>
<li>Diversos</li>
<li>Processos</li>
<li>Notícias</li>
<li class="dados">SESMT</li>
<li>Normas</li>
<li>Consulta CA</li>
<li>Consulta CNAE, CID-10, CBO</li>
<li>Implantação</li>
<li>PPP</li>
<li>PPRA</li>
<li>PCMSO</li>
<li>A.P.R.</li>
<li>Cartilhas</li>
<li>Check-List</li>
<li>DDS</li>
<li>DDS - Lista</li>
<li>EPI</li>
<li>Mapa de Riscos</li>
<li>Ordens de Serviços (OS)</li>
<li>Placas</li>
<li>Procedimentos</li>
<li>Diversos</li>
<li>Perguntas / Respostas</li>
<li class="dados">Multimidia <span class="badge text-right">52</span></li>
<li>Fotos</li>
<li>Vídeos</li>
<li class="dados">Emprego</li>
<li>Vagas</li>
</ul>
</div><!--/.nav-collapse -->
</div>
i think you should add css to nav controller
overflow-y: auto !important;
My navbar has a dropdown menu in it that will not toggle when a user navigates to a page with the affix.js functionality on it. I'm building this in Visual Studio 2012, so its a master/content page setup. On any other page, the navbar works fine, so I assume it has to do with affix.js because it is the only differing element.
Master navbar:
<nav class="navbar navbar-default" id="navbar" 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="#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="Home.aspx">
<img src="../Images/#######.png" class="img-responsive" alt="Bauen Group logo"/>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Products & Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Consulting</li>
<li>Filler</li>
<li>Product Documentation</li>
</ul>
</li>
<li class="dropdown">
Company <b class="caret"></b>
<ul class="dropdown-menu">
<li>About Us</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</li>
<li>Customer Portal</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
On the content page, I added an extra reference to my jquery and bootstrap .js files in the header because I was getting an exception that jquery was not defined. The .js files are also referenced at the bottom of the master page.
Content page:
<script type="text/javascript">
$(document).ready(function () {
$('#sidebar').affix({
offset: {
top: 245
}
});
var $body = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;
$body.scrollspy({
target: '#leftCol',
offset: navHeight
});
});
</script>
<div class="container" id="top">
<div class="row">
<div class="col-lg-3" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
//<li><a>side bar content</a></li>
</ul>
</div>
<div class="col-lg-9">
//content
</div>
</div>
Not too sure whats going on. I wonder if anyone else has had this problem. Any help would be appreciated.
I took the javascript references out on the content page. I solved my issue with the dropdown list by taking the jquery script in the content page header and inserting it into the code of the master page below the javascript references.
freedomcore.com/saverplaces.co.uk/NEW/
In the above site when click the Terms & Conditions or More information on this voucher links just below the Get Voucher button. You will see a div slide down below with the content.
I want it so that if you have clicked Terms & Conditions then go and click More information on this voucher it will hide the "Terms & Conditions" content so that both are not displayed at the same time.
My JavaScript isn't the best this is what I came up with but it does not work:
I have More information on this voucher link this class hide-terms-1 then I have this jQuery code:
$(document).ready(function(){
$(".hide-terms-1").click(function(){
$("#voucher-terms-1").hide();
});
});
This seems to be working kind of but once it is click you can not open it back up again.
HTML:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar menubutton" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="menu">Menu</span>
</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-search"><img src="images/search_03.png">Search</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>About Us</li>
<li>Research & Innovation</li>
<li>Our Products</li>
<li>Responsibility</li>
<li class="subnav"><a href="#" >Careers</a></li>
<li class="subnav"><a href="#" >Newsroom</a></li>
<li class="subnav"><a href="#" >Contact Us</a></li>
<li class="navfoot">This is a mobile version of our website<br/>
View full site</li>
</ul>
</div><!--/.nav-collapse -->
<div class="nav-search collapse">
<div class="search_box">
<form action="" method="post">
<input type="text" value="Enter Search">Search
</form>
</div><!-- end search_box -->
</div><!--/.nav-search -->
</div>
</div>
</div>
JS:
$('.container a').click(function(){
var $target = $($(this).data('target'));
if(!$target.hasClass('in'))
$('.container .in').removeClass('in').height(0);
});
http://jsfiddle.net/gNUEx/
http://jsfiddle.net/mmfansler/fzbsp/
Let's try in this way:
$(document).ready(function(){
$(".hide-terms-1").click(function(){
$("#voucher-terms-1").collapse('hide');
});
});
This is much better I think
$(".navbar").find("[data-toggle=collapse]").click(function(e){
e.preventDefault();e.stopPropagation();
$(".navbar").find(".collapse.in").collapse("hide");
$($(this).attr("data-target")).collapse("show");
});