We Keep Coding

Collapse navbar toggle

i have a question and that is about my navbar collapse in html. i currently use
http://pastebin.com/s92VvJr6
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><i class="fa fa-bars fa-2x" aria-hidden="true"></i></button>
<script>
$(function() {
$('.nav a').on('click', function(){
if($('.navbar-toggle').css('display') !='none'){
$(".navbar-toggle").trigger( "click" );
}
});
});
</script>
<img klass="crab" src="images/crab.png" height="50" width="50">
<a class="navbar-brand" href="">Restaurang MaxLax</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="menu-collapsed">
<div class="bar"></div>
<div class="collapse navbar-collapse">
<nav>
<ul class="nav navbar-nav">
<li>HOME</li>
<li>MENU</li>
<li>GALLERY
<li>CONTACT</li>
</ul>
</nav>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
(i don't know how to paste it in here, im new)
when the page goes to 765px width it shows the bar icon. problem is that i can't click on it to toggle down some menus. so my question leads to
Q: How do i write the script so it works will with the code.
would also be great if you can make it for me :) hehe
Mvh Max

So you are using a boostrap navbar without calling the bootstrap js file or the css file for that matter? At least I am not seeing it in your code, and the bootstrap js file should be called directly after the jquery call. Link those two files in from bootstrap and you should have no issue toggling the navbar.
Also as stated this isnt some freelance site that we will just make your code for you. This is a site for you to learn what it is you are doing. If I were you I would edit out that statement pronto or you risk a flurry of downvotes and having the question removed

Material design Lite - Navigation lock in place

<div class="mdl-layout__drawer">
<span class="mdl-layout-title">SITE NAME</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
Hi i am trying to figure out how I get this menu to ALWAYS (unless mobile) lock inside the users view, and for the site grid to resize. but one step at a time how do I get this to lock (so users can't close or open)

Please check the below code. Dictation of fixed drawer should be in a div class above the drawer. It was taken from the MDL page, https://getmdl.io/components/index.html#layout-section/layout
and look under fixed header, there is also a code pen available.
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<!-- Your content goes here -->
</div>
</main>
</div>

Bootstrap Navbar - Horizontal Push

I am building a site with Bootstrap. On a mobile device, I have a hamburger menu. This appears as part of the Navbar. When I click the navbar, the content of the page is pushed down and the menu appears at the top. This is the default behavior of Bootstrap's Navbar. I would like to push the content right and have my menu take up the full height of the device.
Is there a way to do this with Bootstrap? Currently, my code looks like this:
<div class="collapse" id="nav1">
<h4>Hello</h4>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<nav class="navbar">
<div class="col-xs-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav1">
☰
</button>
</div>
<div class="col-xs-8 center-block text-center">
My App
</div>
<div class="col-xs-2 text-right">
<button>login</button>
</div>
</nav>
Is there a way to make the hamburger menu appear along the side instead of the top?

you could use the jasny bootstrap - it's pretty nice and you can integrate it too bootstrap really easy without touching core files:
http://www.jasny.net/bootstrap/javascript/#offcanvas
also, bootstrap already got a offcanvas function:
http://getbootstrap.com/examples/offcanvas/
Without testing:
<div class="sidebar-offcanvas" id="nav1">
<h4>Hello</h4>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<nav class="navbar">
<div class="col-xs-2">
<button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target="#nav1">
☰
</button>
</div>
<div class="col-xs-8 center-block text-center">
My App
</div>
<div class="col-xs-2 text-right">
<button>login</button>
</div>
</nav>
////EDIT////
Working fiddle: http://jsfiddle.net/chjdfqpg/2/

Bootstrap 3 Navbar toggle Not Functioning

My navbar's toggle button refuses to work. The code I'm using has been copied and pasted from a Bootstrap template with a fully functional navbar. I don't know what's up.
<!-- Navigation -->
<nav class="navbar navbar-inverse 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="#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="#page-top">Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Home
</li>
<li class="page-scroll">
Downloads
</li>
<li class="page-scroll">
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Here's the script tags to the JavaScript and jQuery files. They've been left unmodified.
<!-- jQuery -->
<script src="js/jquery.js" />
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js" />

You didn't identify anything to drop down. You need a list of things, using an unordered list. All you have is the names of the buttons. Please see bootstraps example below:
http://getbootstrap.com/components/#btn-dropdowns

Using jquery.easytabs with bootstrap 3 navbar-toggle issue

I am trying to use easytabs jquery with Twitter Bootstrap 3. The problem is when i try to resize it, the navbar-toggle isn't working anymore when I click it, nothing appears. Any idea why?
Here is what my html structure looks like:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<h1><a class="navbar-brand" href="#">Bach Wigs</a></h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="tabContainer">
<ul class="nav navbar-nav navbar-right">
<li class='active'>Salon</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Hair Care</li>
<li>Hair Extensions</li>
<li>Hair Color</li>
<!-- <li class="divider"></li> -->
</ul>
</li>
<li>Location</li>
<li>Contact Us</li>
</ul>
<section class="body">
<div id="salon">
<div class='salon-title center-block'>
<img src="img/LogoPNG2.png" alt="logo" class='center-block'>
</div>
<div class='salon-description center-block'>
<h3>Bach Wigs</h3>
<p>We provide top quality in all our services color, cut, style, extensions, wigs and much more.</p>
<p> Our newly remodeled salon established, December, 2012 services the finest clientele in the Metroplex, the United States and several countries around the world.</p>
</div>
</div>
<div id="services">
<div class='salon-title center-block'>
<img src="img/LogoPNG2.png" alt="logo" class='center-block'>
</div>
<div class='salon-description center-block'>
<h3>Bach Wigs</h3>
<p>We provide top quality in all our services color, cut, style, extensions, wigs and much more.</p>
<p> Our newly remodeled salon established, December, 2012 services the finest clientele in the Metroplex, the United States and several countries around the world.</p>
</div>
</div>
</section>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
And here's the javascript code when i try to use easytabs:
$(document).ready( function() {
$('#tabContainer').easytabs({
transitionIn: 'fadeIn',
transitionOut: 'fadeOut',
animationSpeed: 'slow'
});
});
UPDATE:
I changed tabContainer back to bs-example-navbar-collapse-1 and created another div to place the tab id for easytabs jquery to function. Problem now is the body contents are also getting hidden when going responsive. I know it's because of the order, I'm finding ways how to solve this. Hopefully you can give out some ideas too. Thanks!
If you want, you can take a look at the website itself. http://webguy.moe/hair