Develop Reference

bootstrap dropdown on hover but main dropdown is still a link

How to make the bootstrap dropdown on hover and still make the main button a link like if i click the dropdown button instead of a dropdown it should go to a different page
Here is my HTML
<div class="body-wrap">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<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">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
Here is my JS
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
Here is a code pen sample
https://codepen.io/anon/pen/boNGBY

Just remove the (data-toggle="dropdown") from your anchor tag().
Dropdown

How to make 3 rows of NavBar in Bootstrap3

I wanna start learning about website. I just have experience in native php and css. I have no experience with framework (bootstrap). Now, Im starting learning about framework as I know it's important.
So I want to make a website with bootstrap for layouting. I need to make a fixed-top navbar. But I have 3 rows as my navbar.
I have search and tried combine This First One, This Second One, This Third One, and many more.
I have took almost 3 days to combine it. But not get what I want. Frustated T_T.
Can anyone please help me develop 3 rows fixed navbar (in simple code, so as a starter I could understand and do improvement).
The problem always about my logo image.
Here is the look which I want to make:
I'll appriciate any help. Thanks.

Something like this? demo: http://www.bootply.com/lp3BUeCXzf
this one has three menus last menu with collapse icon
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="divide-nav">
<div class="container">
<p class="divide-text">Some Text Here</p>
</div>
</div>
<nav class="navbar navbar-default navbar-lower" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse collapse-buttons" id="bs-example-navbar-collapse-2">
<form class="navbar-form navbar-left" role="search">
<button class="btn btn-success">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="filler"></div>
</div>
</div>

Bootstrap Navigation Javascript not working

my Javascript that is supposed to open the 2nd layer of my Navigation does not work and I dont know why it is not working. Am I overseeing something obvious? Its a bit warm in my office atm. :D
$('.submenu').click(function(e) {
e.preventDefault();
if ($(this).closest("ul .sub").hasClass("hide")) {
$(this).closest("ul .sub").removeClass('hide');
$(this).closest("ul sub").addClass('show');
}
else {
$(this).closest("ul sub").addClass('hide');
$(this).closest("ul sub").removeClass('show');
}
});
The HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<div class="centering">
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="#"><img id="navlogo" alt="trlololol" src="gfx/Logo_Friedhof_Bildmarke-01.svg"></a></li>
<li class="dropdown">
Dropdown<span class="nav-img"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="submenu dropdown-toggle">Next menu level<span class="nav-img"></span></li>
<ul class="sub hide">
<li>Blablabla</li>
<li>Blablubla</li>
<li>Blablibla</li>
</ul>
<li>One link</li>
</ul>
</li>
<li class="dropdown">
Dropdown32<span class="nav-img"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="submenu">Next menu level<span class="nav-img"></span></li>
<ul class="sub hide">
<li>Blablabla</li>
<li>Blablubla</li>
<li>Blablibla</li>
</ul>

You should nest your ul inside of your li like this:
<li class="submenu">Next menu level<span class="nav-img"></span>
<ul class="sub hide">
<li>Blablabla</li>
<li>Blablubla</li>
<li>Blablibla</li>
</ul>
</li>
Then you can do:
$('.submenu').click(function(e) {
$(this).children('ul.sub').toggleClass('hide')
});
fiddle: https://jsfiddle.net/hubkefw7/

Jasny Bootstrap - offcanvas avoid push of the main page: how to force menu to overlap?

I'm using the offcanvas.js by Jasny Bootstrap on Prestashop.
My offcanvas menu, once a button is clicked, pushes the main page on the left and enters in slide from the left.
I would like to achieve this:
once the button is clicked the main page SHOULD NOT MOVE, the
offcanvas should slide from left (as it is now) BUT, instead of pushing it, overlap the main page...
Which part of the offcanvas.js should I change?

It sounds like you're using the "push" instead of "slide" option. Use the class "offcanvas" and it should work. Check out these examples:
http://www.jasny.net/bootstrap/examples/navmenu/
I wanted the slide-in for all views, so I simply used the "offcanvas" class, rather than the "offcanvas-sm" you see in the source code for the slide-in example:
<div class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm">
<a class="navmenu-brand visible-md visible-lg" href="#">Project name</a>
<ul class="nav navmenu-nav">
<li class="active">Slide in</li>
<li>Push</li>
<li>Reveal</li>
<li>Off canvas navbar</li>
</ul>
<ul class="nav navmenu-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu navmenu-nav">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<div class="navbar navbar-default navbar-fixed-top hidden-md hidden-lg">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu">
<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>

I commented the line 155:
//$('body').css(prop, padding)
And line 187:
//$(this).css(placement, 0)
and replaced all canvas-sliding with the class no-sliding...
it worked by attempt!

Bootstrap - Why my scrollspy is not working?

I've never used scrollspy in my project and I need to know how it works. I have seen the documentation from the bootstrap page, some other stackoverflow questions and youtube videos.
I have this code:
For the nav:
<!-- Start nav -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- 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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo" src="images/logo.png" alt="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">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<!--<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>-->
<ul class="nav navbar-nav navbar-right" id="navbar">
<li>Incio</li>
<li>Nuestros Servicios</li>
<li>Portafolio</li>
<!--<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>-->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- End nav -->
For the body:
<!-- Body container -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12 menu-1" id="Inicio"></div>
<div class="col-md-12 menu-2" id="NuestrosServicios"></div>
<div class="col-md-12 menu-3" id="Portafolio"></div>
</div>
</div>
<!-- End Body container -->
The JavaScript side:
$(function() {
$("body").scrollspy({target: "#navbar"});
});
The full example in jsbin:

The target should indicate to the element id. In your navbar element I don't see the id attribute. Try adding id to the navbar.
Also add the position: relative; css to your body element.
if the above didn't fix the issue use the data attribute like this data-spy="scroll" data-target="#navbar-example" in the body tag instead of javascript and don't forget the id attribute for the navbar element.