I'm using the flatly theme from bootswatch.com
It has a collapsible topnav bar, but I want to refactor it so it's a sidebar nav rather than topnav.
Here is the current code:
Toggle navigation
Brand
<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" role="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>
<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">
<li>Link</li>
</ul>
</div>
</div>
I'm hoping I just have to change a few class names to get it to work before I invent my own method. (I'm new to bootstrap).
Related
I'm trying to add offcanvas to my bootstrap navigation, the responsive works perfectly but the dropdown menu doesn't work when i try the desktop resolution.
The problem seems to be the "bootstrap.offcanvas.js".
When I delete the "bootstrap.offcanvas.js", it works.
Any idea to resolve this problem?
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container menu-height">
<div class="navbar-header">
<button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<object width="98px" data="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" title="xxxxxxxxxxxxxxxxxxxxxxxxxxxx" type="image/svg+xml"></object>
</div>
<!--/.navbar-header -->
<div class="navbar-offcanvas" id="js-bootstrap-offcanvas">
<ul class="nav navbar-nav">
<li class="dropdown">
xxxxxxxxx <b class="caret"></b>
<ul class="dropdown-menu" >
<li>xxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxxx</li>
</ul>
</li>
<li class="dropdown">
xxxxxxxxx<b class="caret"></b>
<ul class="dropdown-menu">
<li>xxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxx</li>
</ul>
</li>
<li class="dropdown">
xxxxx <b class="caret"></b>
<ul class="dropdown-menu">
<li>xxxxxx</li>
<li class="divider"></li>
<li>xxxxxx</li>
<li class="divider"></li>
<li>xxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxx</li>
</ul>
</li>
<li class="responsive-online-shop"><div class="box-online-shop"><a class="nav-link btn btn-secondary-outline btn-secondary" href="xxxxxx">xxxxxx</a></div></li>
<li><div class="box-online-flag"><object data="xxxxxxxxxxxxx" type="image/svg+xml"></object><span class="flag-responsive hidden-lg">xxxxxxx</span></div></li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<
<nav class="navbar navbar-default navbar-offcanvas navbar-offcanvas-touch" role="navigation" id="js-bootstrap-offcanvas">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Another Link <span class="caret"></span>
<ul class="dropdown-menu" role="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">
Another Link <span class="caret"></span>
<ul class="dropdown-menu" role="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>
<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">
<li>Link</li>
<li>Another Link</li>
</ul>
</div>
</div>
</nav>
</header>
nav class="navbar navbar-default navbar-offcanvas navbar-offcanvas-touch" role="navigation" id="js-bootstrap-offcanvas">
Brand
Link
Link
Another Link
Action
Another action
Something else here
Separated link
One more separated link
Another Link
Action
Another action
Something else here
Separated link
One more separated link
Submit
Link
Another Link
I must create asp.net age with bootstrap, in html 4.01.
But most of bootstrap atributes working only with html 5.0
<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="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="#">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">
<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>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
data-toggle , scrips without types not working correct, it even possible change it to html 4.0 tags?
I'm using the Bootstrap Material Design Template for a website. It has three different colored navbars of which I want to use the last one. But I'm unsure how to use that last one. Do I need to manually change the color of the navbar, or can I change one thing somewhere so that the color of all the buttons and radio buttons also changes?
I found a piece on the github page which points out how to change the primary color to a cusom one. But I don't want that, I simply want to use the blue color which you see in the third navbar option here.
Any ideas how I can do that? All tips are welcome!
Actually you just have to use different classes for change in colors, by default a Bootstrap theme have navbar-default and navbar-inverse
But in the very theme you're using have a class called navbar-material-light-blue-300 which needs to be added in following manner.
<div class="navbar navbar-material-light-blue-300">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-material-light-blue-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-material-light-blue-collapse">
<ul class="nav navbar-nav">
<li class="active">Active</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 class="dropdown-header">Dropdown header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<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>
</div>
Happy Coding :)
.navbar-inverse is the class that affecting its color.
<div class="navbar navbar-inverse">
....
</div>
Other two above than the third have .navbar-default and .navbar-warning classes respectively.
Use below code:
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-inverse-collapse">
<ul class="nav navbar-nav">
<li class="active">Active
</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 class="dropdown-header">Dropdown header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input class="form-control col-lg-8" placeholder="Search" type="text">
</form>
<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>
</div>
I want to add a navigation bar which is initially long in height. and when the user scrolls the height reduces and the logo becomes small. I am using Bootstrap and my code is displayed as shown below.
Can someone please help me edit the code so i can reduce height of the navigation bar when scrolling the page.
<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="#">project a</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"><a href="#" class="dropdown-toggle"
data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<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>
<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">
<li>Link</li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<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>
This will help you achieve what you want.
jsFiddle
$(function(){
$('#navigation-bar').data('size','big');
});
$(window).scroll(function(){
var $nav = $('#navigation-bar');
if ($('body').scrollTop() > 0) {
if ($nav.data('size') == 'big') {
$nav.data('size','small').stop().animate({
height:'40px'
}, 600);
}
} else {
if ($nav.data('size') == 'small') {
$nav.data('size','big').stop().animate({
height:'100px'
}, 600);
}
}
});
this is from the question here
Update
Based on the bootstrap structure
I have written the code . Check this out jsFiddle
HTH.
http://jsfiddle.net/Cwf4W/10/
there's my code I can't seem to get the bootstrap drop down menu to work, any help? I'm pretty sure I've got all the js right and the css too, I've been looking for awhile now :o
<!-- BOOTSTRAP -->
<div class="navbar navbar-inverse" style="position: static;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project Stalk</a>
<div class="nav-collapse subnav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Settings <b class="caret"></b>
<ul class="dropdown-menu">
<li>Account settings</li>
<li>Privacy settings</li>
<li>Logout</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li>Link</li>
<li class="divider-vertical"></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><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
Your code looks right, but several javascript files including http://www.sieuphan.com/bootstrap/bootstrap-dropdown.js return an error-404
The development console shows these errors clearly (e.g in Chrome "View > Developer > Javascript console")