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;
Related
Hello all,
I am trying to make a navbar disappear after being clicked (It also has a sub menu dropdown). I tried using this (in fact it worked for a while but now does not). Any help would be appreciated, David
<script type="text/javascript">
<!--Make the menu collapse on option click in mobile mode-->
jQuery(document).ready(function () {
jQuery(".nav .dropdownmenu, .navbar-header .dropdownmenu").click(function(event) {
// check if window is small enough so dropdown is created
jQuery(".navbar-collapse").removeClass("in").addClass("collapse");
});
});
</script>
This is the dropdown menu
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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/logo.png" height="30px" style="margin-top: 10px; margin-left: 5px;">
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdownmenu active">Home</li>
<li class="dropdownmenu">Sales</li>
<li class="dropdownmenu">Lettings</li>
<li class="dropdownmenu">Financial Services</li>
<li class="dropdown">
Branches <span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdownmenu" data-toggle="modal" data-target="#northwichModal"><a >Northwich</a></li>
<li class="dropdownmenu" data-toggle="modal" data-target="#middlewichModal">Middlewich</li>
<li class="dropdownmenu" data-toggle="modal" data-target="#winsfordModal">Winsford</li>
<li class="dropdownmenu" data-toggle="modal" data-target="#lettingsModal">Northwich Lettings</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
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 am simply trying to get the nav bar to toggle when I resize the screen. Right now it simply disapears. I am using bootstrap 3.3.1 and have maxcdn links from the documentation for both the javascript and css in my code. I've been over the documentation but I must be missing something. Below is my exact code. I have changed very little from the example given on the bootstrap website.
<nav class="navbar navbar-static" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
</div>
<div id="navbar" class="navbar-collapse collapse top">
<ul class="nav navbar-nav navbar-right">
<li ><a class="top-nav" href="./">About</a></li>
<li ><a class="top-nav" href="../navbar-static-top/">FAQ</a></li>
<li>
<div class="navbar-form">
<button class="btn btn-default navbar-join-waitlist" type="button" data-toggle="modal" data-target="#signinModal">
Get Early Access
</button>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
The navbar is there but all white so you can't see it.
Add the navbar-default class to the nav element in order to get bootstraps default style / theme:
<nav class="navbar navbar-default navbar-static" role="navigation">
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 having some problem with a Bootstrap menu.
I want to collapse menu after clicking one of the section instead.
HTML:
<div class="container" id="home">
<nav class="navbar navbar-default navbar-fixed-top" 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>
<a class="navbar-brand" href="#">Brand</a>
</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">
<li class="active">HOME</li>
<li>PHILOSOFY</li>
<li>KNOWLEDGE</li>
<li>EXPERIENCE</li>
<li>INTERESTS</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
I've created this fiddle:
http://jsfiddle.net/kHhgw/
You can utilize the data-toggle="collapse" and data-target="#bs-example-navbar-collapse-1" attributes in your link elements in addition to the menu button.
So from your example:
<a data-toggle="collapse" data-target="bs-example-navbar-collapse-1" href="#philosofy">PHILOSOFY</a>
Updated fiddle: http://jsfiddle.net/kHhgw/1/