I want to add search box to my navbar but not as the traditional way as appears in the picture , I want to add a search icon button in the navbar only and when user click on it the search box appears under the search icon .
How can i do this any one can help me please ?
<nav class="navbar navbar-default" role="navigation">
<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>
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Contact US</li>
<li class="dropdown">
Who we are <b class="caret"></b>
<ul class="dropdown-menu">
<li>About</li>
<li> Mession</li>
<li> Vision</li>
<li class="divider"></li>
<li>Goals</li>
</ul>
</li>
<li>Publications</li>
<li>Media</li>
<li>Partners</li>
</ul>
There are lot of things on the net e.g https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_anim_search
Run below code:
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('https://www.w3schools.com/howto/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<p>Animated search form:</p>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
You can try these snippets.
Solutuion with CSS Only:
.hide
{
opacity: 0;
max-height: 0;
}
#trigger {
position: absolute;
left: -999em;
}
#container input[type="checkbox"]:checked + div
{
max-height: 99em;
opacity: 1;
height: auto;
overflow: hidden;
}
<div id="container">
<label for="trigger">click me for Search</label>
<input type="checkbox" id="trigger">
<div class="hide">
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</div>
<div>
Solution with JS:
function myFunction() {
if (document.getElementById("form").style.display === "none") {
document.getElementById("form").style.display = "block";
} else {
document.getElementById("form").style.display = "none";
}
}
button {
width: 50px;
height: 50px;
}
<p>show and hide search</p>
<button onclick="myFunction()"></button>
<form id="form">
<input type="text" name="search" placeholder="Search..">
</form>
Related
I'm using this updated Bootstrap sidebar collapse in my page, but here the sidebar & content have a fixed width for both divs, the main content is not taking full width after it has collapsed.
HTML:
<div class="col-md-3 col-xs-1 p-l-0 p-r-0 collapse in" id="sidebar">...</div>
<main class="col-md-9 col-xs-11 p-l-2 p-t-2">...</main>
But what I want is after the sidebar collapsed, main content should take full width.
I checked this and few other questions from stack overflow but didn't find what I want
Here's what needed to be done:
First I replaced the outdated col-xs with col. Then I replaced the remaining col-md-9 col-11 with col. Done!
The reason why it's working is because the first column for the sidebar is defined already. col then just fills out all of the available remaining space.
Here's the working code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#sidebar .list-group-item {
border-radius: 0;
background-color: #333;
color: #ccc;
border-left: 0;
border-right: 0;
border-color: #2c2c2c;
white-space: nowrap;
}
/* highlight active menu */
#sidebar .list-group-item:not(.collapsed) {
background-color: #222;
}
/* closed state */
#sidebar .list-group .list-group-item[aria-expanded="false"]::after {
content: " \f0d7";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 5px;
}
/* open state */
#sidebar .list-group .list-group-item[aria-expanded="true"] {
background-color: #222;
}
#sidebar .list-group .list-group-item[aria-expanded="true"]::after {
content: " \f0da";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 5px;
}
/* level 1*/
#sidebar .list-group .collapse .list-group-item {
padding-left: 20px;
}
/* level 2*/
#sidebar .list-group .collapse > .collapse .list-group-item {
padding-left: 30px;
}
/* level 3*/
#sidebar .list-group .collapse > .collapse > .collapse .list-group-item {
padding-left: 40px;
}
#media (max-width:48em) {
/* overlay sub levels on small screens */
#sidebar .list-group .collapse.in, #sidebar .list-group .collapsing {
position: absolute;
z-index: 1;
width: 190px;
}
#sidebar .list-group > .list-group-item {
text-align: center;
padding: .75rem .5rem;
}
/* hide caret icons of top level when collapsed */
#sidebar .list-group > .list-group-item[aria-expanded="true"]::after,
#sidebar .list-group > .list-group-item[aria-expanded="false"]::after {
display:none;
}
}
/* change transition animation to width when entire sidebar is toggled */
#sidebar.collapse {
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .2s;
-o-transition-duration: .2s;
transition-duration: .2s;
}
#sidebar.collapsing {
opacity: 0.8;
width: 0;
-webkit-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-property: width;
-o-transition-property: width;
transition-property: width;
}
main{
background-color:green;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-1 pl-0 pr-0 collapse in" id="sidebar">
<div class="list-group panel">
<i class="fa fa-dashboard"></i> <span class="hidden-sm-down">Item 1</span>
<div class="collapse" id="menu1">
Subitem 1
<div class="collapse" id="menu1sub1">
Subitem 1 a
Subitem 2 b
Subitem 3 c
<div class="collapse" id="menu1sub1sub1">
Subitem 3 c.1
Subitem 3 c.2
</div>
Subitem 4 d
Subitem 5 e
<div class="collapse" id="menu1sub1sub2">
Subitem 5 e.1
Subitem 5 e.2
</div>
</div>
Subitem 2
Subitem 3
</div>
<i class="fa fa-film"></i> <span class="hidden-sm-down">Item 2</span>
<i class="fa fa-book"></i> <span class="hidden-sm-down">Item 3 </span>
<div class="collapse" id="menu3">
3.1
3.2
<div class="collapse" id="menu3sub2">
3.2 a
3.2 b
3.2 c
</div>
3.3
</div>
<i class="fa fa-heart"></i> <span class="hidden-sm-down">Item 4</span>
<i class="fa fa-list"></i> <span class="hidden-sm-down">Item 5</span>
<i class="fa fa-clock-o"></i> <span class="hidden-sm-down">Link</span>
<i class="fa fa-th"></i> <span class="hidden-sm-down">Link</span>
<i class="fa fa-gear"></i> <span class="hidden-sm-down">Link</span>
<i class="fa fa-calendar"></i> <span class="hidden-sm-down">Link</span>
<i class="fa fa-envelope"></i> <span class="hidden-sm-down">Link</span>
<i class="fa fa-bar-chart-o"></i> <span class="hidden-sm-down">Link</span>
<i class="fa fa-star"></i> <span class="hidden-sm-down">Link</span>
</div>
</div>
<main class="col pl-2 pt-2">
<i class="fa fa-navicon fa-lg"></i>
<hr>
<div class="page-header">
<h1>Bootstrap 4 Sidebar Menu</h1>
</div>
<p class="lead">A responsive, multi-level vertical accordion.</p>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
My current accordion functionality is when we click on '+' sign it opens the accordion and leaves it open even though we click on the '+' sign of other accordion.
What i need is on click of one accordion other open accordions should close.
Below is my Codepen link.
<aside class="col-md-4">
<section class="sidebar-tools">
<h4 class="my-4">My</h4>
<nav>
<a class="tile-link" data-toggle="collapse" href="#myDoctor">
My
</a>
<div class="collapse sidebar-collapse" id="myDoctor">
Viewr
Change
</div>
<a class="tile-link" data-toggle="collapse" href="#IDcards"> Cards</a>
<div class="collapse sidebar-collapse" id="IDcards">
View
Change
</div>
<a class="tile-link" href="#">nformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
<h4 class="my-4">My Tools</h4>
<nav>
<a class="tile-link" href="#">Cards</a>
<a class="tile-link" href="#">Enformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
</section>
</aside>
Thanks
CodePen
You can achieve this by using data-parent to your link, here is the snippet with your code
var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function() {
$myGroup.find('.collapse.in').collapse('hide');
});
.sidebar-tools a {
color: white;
}
a.tile-link {
text-decoration: none;
}
.tile-link {
-js-display: flex;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2980b9;
padding: 10px;
margin: 2px 0;
}
.tile-link:hover {
background-color: #2980b9;
}
.tile-link[data-toggle]:after {
content: '\f067';
font-family: 'fontawesome';
transition: all .25s ease-in-out;
float: right;
}
.tile-link[aria-expanded="true"]:after {
transform: rotate(45deg);
}
.sidebar-collapse {
background-color: #95a5a6;
margin-top: -2px;
}
.sidebar-collapse .sidebar-collapse-link {
color: white;
display: block;
padding: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<aside class="col-md-4" id="myGroup">
<section class="sidebar-tools">
<h4 class="my-4">My</h4>
<nav>
<a class="tile-link" data-toggle="collapse" href="#myDoctor" data-parent="#myGroup">
My
</a>
<div class="collapse sidebar-collapse" id="myDoctor">
Viewr
Change
</div>
<a class="tile-link" data-toggle="collapse" data-parent="#myGroup" href="#IDcards"> Cards</a>
<div class="collapse sidebar-collapse" id="IDcards">
View
Change
</div>
<a class="tile-link" href="#">nformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
<h4 class="my-4">My Tools</h4>
<nav>
<a class="tile-link" href="#">Cards</a>
<a class="tile-link" href="#">Enformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
I have something in the following css that is causing my fixed navbar to push up when scrolling down untill its almost not visible. This navbar works on all my other pages so I know its something to do with the following css to this page. Attached is the nav bar css and the css that seems to be causing it to not work properly for (1) page... it seems to work fine in browser and Dreamweaver live view but not on any cell phone... The footer seems jacked now too.. its something in between the header and footer ; Also attached is the pages HTML.
live version as you can see the pages I have finished scroll properly except services > roofing page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Roofing Contractor Springfield IL Surrounding Areas</title>
<meta name="description" content="Licensed Roofing Contractor serving Springfield IL and surrounding areas. Hire a professional and let us exceed your residential roofing needs today!">
<meta name="keywords" content="Roofing Contractor New Roof Repair Licensed Bonded Insured Free Estimates">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
<div class="container" id="custom-nav">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
<li class="dropdown">
Services<b class="caret"></b>
<ul class="dropdown-menu">
<li>Roofing</li>
<li>Siding</li>
</ul>
</li>
<li>
Contact
</li>
<li class="dropdown">
More<b class="caret"></b>
<ul class="dropdown-menu">
<li>Gallery</li>
<li>Reviews</li>
<li>Careers</li>
</ul>
</li>
</ul>
<div class="social">
<ul>
<li><i class="fa fa-lg fa-facebook"></i></li>
<li><i class="fa fa-lg fa-twitter"></i></li>
<li><i class="fa fa-lg fa-google-plus"></i></li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container-fluid margin-top">
<div class="row padding-left padding-right">
<h3><span class="glyphicon glyphicon-bullhorn glyphicon-color"></span> Roofing Contractor <br><small>"Get The Free Estimate You Deserve!"</small></h3><hr>
<h4>Need a New Roof or Roof Repairs?<br><small>We are completely Licensed Bonded and Insured for all of your roofing needs!</small></h4>
</div>
<hr>
<div class="row ">
<div class="col-md-4 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-lg-7 col-md-6">
<img class="lib-img-show" alt="New Roof - Shingle Roofing" src="images/shingle-roofing.jpg">
</div>
<div class="col-md-5">
<div class="lib-row lib-header">
Shingle Roofing
<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
Shingle Roofing Info Here!
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-lg-7 col-md-6">
<img class="lib-img-show" alt="New Roof - Rubber Roofing" src="images/flat-roofing.jpg">
</div>
<div class="col-md-5">
<div class="lib-row lib-header">
Rubber Roofing
<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
Rubber Roofing Info Here
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-lg-7 col-md-6">
<img class="lib-img-show" alt="New Roof - Metal Roofing" src="images/metal-roofing.jpg">
</div>
<div class="col-md-5">
<div class="lib-row lib-header">
Metal Roofing
<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
Metal Roofing Info Here!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12 call-now">
<h4>“We pride ourselves on being able to provide Safe, Clean, Quality work with competitive rates!”</h4>
Call Now (217) 820-7597
</div>
<footer>
<div class="container-fluid">
<small>Copyright © ZNC Roofing Contractor 2017</small>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-91438053-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Google Maps -->
</body>
</html>
Custom Navbar
.navbar-collapse {border-color: #FFFFFF !important; margin-top: 5px;}
.dropdown-menu > li > a {color : #FFFFFF !important;}
.dropdown-menu > li > a:hover{color : #EF7800 !important;}
.navbar-toggle {background: #192F42; padding-top: 12px;}
.navbar-inverse .navbar-toggle {border-color: #192F42;}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {background: none;}
#custom-nav { margin-left: 0px; width: 100%;}
.navbar-inverse {background-color: #192F42;}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #192F42}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #192F42}
.dropdown-menu { background-color: #192F42}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #192F42}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none;}
.navbar-inverse { border-color: #192F42}
.navbar-inverse .navbar-brand {height: 50px;width: 142px;background: url(../images/brand.jpg) no-repeat;background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;
-o-background-size: cover;}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #EF7800}
.dropdown-menu>li>a { color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #EF7800}
/* Roofing Page */
.lib-panel {
margin-bottom: 20Px;
}
.lib-panel img {
width: 100%;
background-color: transparent;
}
.lib-panel .row,
.lib-panel .col-md-6 {
padding: 0;
background-color: #FFFFFF;
}
.lib-panel .lib-row {
padding: 0 20px 0 20px;
}
.lib-panel .lib-row.lib-header {
background-color: #FFFFFF;
font-size: 20px;
padding: 10px 20px 0 20px;
}
.lib-panel .lib-row.lib-header .lib-header-seperator {
height: 2px;
width: 26px;
background-color: #FFFFFF;
margin: 7px 0 7px 0;
}
.lib-panel .lib-row.lib-desc {
position: relative;
height: 100%;
display: block;
font-size: 13px;
}
.lib-panel .lib-row.lib-desc a{
position: absolute;
width: 100%;
bottom: 10px;
left: 20px;
}
.row-margin-bottom {
margin-bottom: 20px;
}
.box-shadow {
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.10);
box-shadow: 0 0 10px 0 rgba(0,0,0,.10);
}
.no-padding {
padding: 0;
}
I'm absolutly stacked while trying to align item in bootstrap navbar vertically on both desctop and mobile view.
Does anybody can explain how to di it?
I need to align avatar and name to right side on desctop and mobile and centerd vertially in navbar.
Here the HTML code:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<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 logo" href="#"><b>Super</b> logo</a>
</div>
<div class="nav navbar-nav navbar-right">
<ul class="unstyled">
<li>
<a href="/profile">
<img class="img-rounded" src="http://lorempixel.com/output/people-q-c-150-150-9.jpg" alt="">
<span class="hidden-xs">User name</span>
</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse" id="main-nav">
<ul class="nav navbar-nav visible-xs">
<li><i class="fa fa-tachometer"></i> menu 1</li>
<li><i class="fa fa-wrench"></i> menu 2</li>
<li><i class="fa fa-sign-out"></i> menu 3</li>
</ul>
</div>
</div></nav>
and CSS
.navbar-toggle {
position: absolute;
left: 10px;
}
.logo {
width: 100%;
padding: 15px 0;
text-align: center;
height: 20px;
}
.img-rounded {
height: 35px;
width: 35px;
border-radius: 50%;
}
.unstyled li {
list-style: none;
}
.unstyled a {
text-decoration: none;
}
#media only screen and (min-width: 768px) {
.logo {
width: 150px;
}
}
Here is a wrong eximple.
http://www.bootply.com/zh0J2u4KUU
updated use this
#media (max-width: 767px)
{
ol, ul{margin-top:6px; margin-right:302px;
}
<ul class="unstyled pull-right">
<li>
*******
</li>
</ul>
change the logo class to pull-right!
I'm trying to set a navigation menu at the top of the screen with two rows:
The former one will contain the Brand, and when the resolution is small enough it will also contain the special bootstrap button menu that displays the collapsed menu items stacked.
The second will contain the categories and will be visible only if the resolution is large enough.
This is what I want to achieve:
When the resolution is big enough
When the resolution is small, the second menu row is collapsed
I have used this code without success (The second row never appears):
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
<li>Cat1</li>
<li>Cat2</li>
<li>Cat3</li>
</ul>
</div>
</div>
</div>
<div class="container">
<p>some text</p>
</div>
</body>
</html>
Any idea?
I have updated your html code..and after changing a little bit of bootstrap styles you may get what you want..
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Cat1</li>
<li>Cat2</li>
<li>Cat3</li>
</ul>
</div>
</div>
</div>
Now set
.navbar-header {
float: none;
}
Now you will get all links below brand name
In bootstrap we can use media queries to set when to display toggle button in navigation menu.Here we can see toggle button when browser size is 500 px or lesser than 500 px(by default toggle button appears when browser size is lesser than 767 px)..
#media (min-width: 500px) {
.navbar-collapse {
width: auto;
border-top: 0;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
navbar-collapse.collapse {
display: block!important;
}
.navbar-toggle {
display: none;
}
.navbar-nav > li {
float: left;
}
}
#media (max-width: 500px) {
.navbar-toggle {
display: block;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block!important;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav > li {
float: none;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
}
Hope this helps you!!!!!