For some reason that I can't figure out, bootstrap 3 on my site is having it's way with me. The toggle menu for when the screen-size is small won't open.
Site http://www.gamingonlinux.com, code:
<nav class="navbar navbar-default navbar-fixed-top" 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=".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" href="http://www.gamingonlinux.com"><img src="/templates/default/images/navbar_logo_light.png" alt="GamingOnLinux" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Donate</li>
<li>Sales</li>
<li>Submit Tip</li>
<li>Gaming Wiki</li>
<li>About Us</li>
<li>Community Page</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> {:username} <b class="caret"></b>
<ul class="dropdown-menu">
{:user_menu}
</ul>
</li>
</ul>
<form method="get" action="/index.php?module=search" class="navbar-form navbar-right" role="search">
<input type="hidden" name="module" value="search">
<input type="text" style="padding-right: 5px;" class="form-control search-bar" name="q" placeholder="Search Articles">
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form>
</div>
</nav>
You have an overriding style in another style sheet, style.light.min.css:
#media (max-width: 985px) {
.navbar-collapse.collapse {
display: none!important;
}
}
Remove that, and the navbar will toggle correctly.
Related
As someone probably know - eBay doesn't respect eg. jQuery. I want make responsive template with responsive menu, but I don't known what should I do with menu. I must delete all jQuery from bootstrap and now menu toggle doesn't work on eg. smartphones. What should I do?
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-headerOne">
<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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Store</li>
<li>Payments</li>
<li>Shipping</li>
<li>Returns</li>
<li>Terms</li>
<li>Gurantee</li>
<li>Abous us</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</nav>
To create these menus without javascript you have to use some CSS. Maybe this link will help you for similar problems: bootstrap-without-jquery
Here is a solution for your particular problem:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
/* Dropdown without JS */
.dropdown-toggle:focus {
pointer-events: none;
}
.dropdown-toggle:focus + .dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.dropdown-menu {
opacity: 0;
display: block;
visibility: hidden;
transition: visibility 0.5s;
}
</style>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="dropdown-toggle 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>
<ul class="dropdown-menu" style="position:absolute;right:0;">
<li class="">
menu1 <span class="sr-only">(current)</span>
</li>
<li class="">
menu2 <span class="sr-only">(current)</span>
</li>
<li class="dropdown active">
menu3 <span class="sr-only">(current)</span>
</li>
<li class=""><a href="/menu3/submenu1/">submenu1
<span class="sr-only">(current)</span></a>
</li>
<li class=""><a href="/menu3/submenu2/">submenu2
<span class="sr-only">(current)</span></a>
</li>
</ul>
<a class="navbar-brand" href="/"
style="background: white; padding-left: 50px;">App</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=""><a href="/menu1/">menu1
<span class="sr-only">(current)</span></a>
</li>
<li class=""><a href="/menu2/">menu2
<span class="sr-only">(current)</span></a>
</li>
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">menu3
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="">A</li>
<li class="">B</li>
<li class="">C</li>
<li class="">D</li>
</ul>
</li>
<li class=""><a href="/menu3/submenu1/">menu3
<span class="sr-only">(current)</span></a>
</li>
</ul>
<i class="navbar-text navbar-right">
Logout
</i>
</div>
</div>
<!-- /.container-fluid -->
</nav>
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 implement search menu on navbar in following way.
There is two design, which is one fore screen < 767px and another one above 767px.
Basically, I am able to expand the search bar but the position of the expanded search bar is not display correctly.
$(function(){
$("#search-button, #search-icon").click(function(e){
e.preventDefault();
$("#search-button, #search-form").toggle();
});
})
#search-form { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- 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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Menu 1
</li>
<li>Menu 2
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form role="search">
<button id='search-button' class='btn btn-default '><span class='fa fa-search'></span></button>
<div id='search-form' class="form-group">
<div class="input-group">
<span id='search-icon' class="input-group-addon"><span class='fa fa-search'></span></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
</form>
</li>
<li><i class="fa fa-user"></i>
</li>
<li>Log In <span class="sr-only">(current)</span>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
I would try this; it follows the bootstrap default for adding forms to the navbar, then you can adjust it for mobile viewports with CSS.
$(function() {
$("#search-button, #search-icon").click(function(e) {
e.preventDefault();
$("#search-button, #search-form").toggle();
});
});
#search-form {
display: none;
}
#media (max-width: 767px) {
.custom-navbar {
text-align: right;
}
.custom-navbar #search-button {
float: none;
border: none;
right: 0;
text-align: right;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<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> <a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Menu 1
</li>
<li>Menu 2
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-user"></i>
</li>
<li>Log In <span class="sr-only">(current)</span>
</li>
</ul>
<form class="navbar-form navbar-right custom-navbar" role="search">
<button id="search-button" class="btn btn-default"><span class="fa fa-search"></span>
</button>
<div id="search-form" class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search"><span id="search-icon" class="input-group-addon"><span class="fa fa-search"></span></span>
</div>
</div>
</form>
</div>
</div>
</nav>
By selecting a category from the responsive menu (the template is just one page), I want to hide nav collapse automatically when clicking. Also stroll to use as navigation, since the template has only one page. I seek a solution that does not affect it, here is the HTML code of menu:
site demo is here:
www.malouinternational.com/index2.html
<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>
</div>
<div id="navbar" class="navbar-collapse collapse" >
<ul class="nav navbar-nav navbar-left ">
<li>HOME</li>
<li>ABOUT</li>
<li>OUR TEAM</li>
<li>JEWELLERY</li>
<li>TRADE</li>
<li>SOCIAL & CORPORATE</li>
<li>PRESS</li>
<li>CONTACT</li>
</ul>
<ul class="nav navbar-nav navbar-left " style="color: #000; padding-left: 30px; padding-top: 15px;">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter "></i>
<i class="fa fa-instagram "></i>
<i class="fa fa-envelope "></i>
<i class="fa fa-book"></i>
</ul>
<ul class="navbar-text navbar-right " style="color: #000; ">
<li style="margin-left: 20px; font-size: 13px; display:inline;">TR</li>
<li style="margin-right:10px; font-size: 13px; display:inline;">EN</li>
</ul>
<div id="sb-search" class="sb-search right" style="position: absolute; right: 70px; top: 0">
<form>
<input class="sb-search-input" type="search" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"></span>
</form>
</div>
</div>
</div>
</nav>
The order in which you load jQuery and Bootstrap is important. Make sure you specify the jQuery library before Bootstrap JavaScript.
Additionally you have several 404 errors due to files missing from the server, you should resolve that too.
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