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>
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; } }
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
I am trying to put a button on the left side of navbar-brand for toggling a sidebar. The button toggles the sidebar. In desktop mode, it works fine but on smaller screens, it changes position and comes to the right side of the navbar-brand.
Here are the screenshots.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" data-toggle="#sidebar" id="sidebar-toggle" class="navbar-left navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Login.aspx" style="vertical-align: middle">
<img src="Logo.png" style="vertical-align: middle" /></a>
<label class="navbar-text text-center text-primary" style="vertical-align:10px;font-size:medium">Example Distribution</label>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search..." />
</form>
</div>
</div>
</nav>
<div class="container-sidebar">
<div id="sidebar">
<ul>
<li>Home</li>
<li>Explore</li>
<li>Users</li>
<li>Sign Out</li>
</ul>
</div>
</div>
Just add this css class pull-left DEMO
<button type="button" data-toggle="#sidebar" id="sidebar-toggle" class=" navbar-toggle pull-left">
Just add this code on document.ready
There might be CSS alternative but I feel this is easy!
DEMO
$(document).ready(function(){
if($(window).width()<768)
{
$('#sidebar-toggle').css('float','left');
}
$(window).on('resize',function(){
if($(window).width()<768)
{
console.log('here');
$('#sidebar-toggle').css('float','left');
}
});
});
CSS Solution:
#media screen and (max-width: 768px) {
#sidebar-toggle{
float:left !important;
}
}
Updated DEMO
I'm trying to put in a menu in a page running off of a Bootstrap template. When I load the page in a window below 960px the mobile version of the menu is already expanded (and covering a large part of my content). There is no 'in' class in the navbar on load, but if I click it, it remains there, and then I click the toggle button again, and it collapses. After the first click the 'in' class appears, but I can't figure out a way to collapse the menu by default on first load. Any ideas?
<body data-spy="scroll" data-target=".navbar">
<div id="wrap">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="./images/chalmers-avancez2.png" alt="" />
</div>
<div id="navbarCollapse" class="navbar navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Intro</li>
<li>Program</li>
<li>Speakers / Performers</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="SV" href="#SV">SV</a></li>
<li><a id="EN" href="#EN">EN</a></li>
</ul>
</div>
</div>
</nav>
You are missing collapse but you also are adding the navbar on it, which is incorrect:
INCORRECT:
<div id="navbarCollapse" class="navbar navbar-collapse">
CORRECT:
<div id="navbarCollapse" class="navbar-collapse collapse">
DEMO: http://jsbin.com/koqas/1/edit
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;