Hi guys I'm using bootstrap for a responsive Nav for the first time.. I've looked up a couple answers to similar questions but can't seem to get my Nav toggle button to show.
The button toggles correctly and displays my Nav; but is invisible. Any insight would be greatly appreciated! :)
<!-- NAVIGATION -->
<div class="nav-container">
<div class"navbar navbar-default" role="navigation">
<div class="container inner-container">
<div class="navbar-header">
<img src="img/index/skytek-logo/Skytek_c1_S.png" width="160px" height="90px" alt="Skytek Logo"><p class="navbar-slogan">Engineering Excellence</p>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">
<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 class="collapse navbar-collapse" id="navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About Us</li>
<li>Support & Services</li>
<li>Sales</li>
<li>News</li>
<li>Contact</li>
<li>Careers</li>
<li>Login</li>
<li class="search-bar">
<form class="navbar-form" role="form" method="get" action="#">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control">
</div>
<button type="submit" class="btn btn-success">Go</button>
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END NAVIGATION -->
You're missing an equals sign here:
<div class="navbar navbar-default" role="navigation">
----------^
Demo
Related
I am facing problem in the dropdown in bootstrap. I have attached all the necessary file correctly. But still its not working.
<nav class="navbar navbar-default navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target="#mainNavbar" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="mainNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Contact</li>
<li>About</li>
<li>Products</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="button" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Subscribe</li>
</ul>
</div>
Make sure your order of placing jquery and bootstrap is correct. Check below snippet which works correctly.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target="#mainNavbar" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="mainNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Contact</li>
<li>About</li>
<li>Products</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="button" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Subscribe</li>
</ul>
</div>
I'm trying to create a responsive header in Bootstrap and am having problems getting it right for mobile devices - it look good for large displays. Here is my html code for layout. I would highly appreciate your help!!! The pic is below the code. Thank you!!!
<section class="container">
<!--HEADER-->
<div class="row header" >
<div class="col-md-6">
<div class="logo">
<img src="img/logo.png" class="img-responsive" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!--/Logo-->
</div>
<div class="col-sm-6 col-lg-6">
<!--Top Utility Links-->
<div class="col-sm-12">
<ul class="utility">
<li>Home</li>
<li>contacts</li>
<li>Help</li>
</ul>
</div><!--/col-sm-12 UTILITY-->
<!--SEARCH-->
<div class="col-md-8 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default search" type="submit"> <i class="glyphicon glyphicon-search"></i> </button>
</div>
<!--/input-group-btn -->
</div>
<!--/input group -->
</form>
</div><!--/col-sm-8 SEARCH-->
</div>
<!-- <nav class="navbar navbar-default" role="navigation">-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right ">
<li>ABOUT</li>
<li>SERVICES</li>
<li class="dropdown">
HISTORY <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link</li>
<li>Another link</li>
<li>One More Link</li>
</ul>
</li>
</ul>
</div>
<!-- </nav>-->
</div>
I have 2 nav bars that I want both the be at the top of the page initially but upon scrolling I want the first nav bar with the brand image to collapse away and the second nav bar with the list links to snap to the top of the page where the first nav bar initially was. Does anyone know how I can do this? Here's an image for reference:
HTML:
<!----- Navbar ----->
<nav class="navbar navbar-default navbar-collapse">
<div class="container">
<div class="navbar-header">
<div class="navbar-header">
<img id="brand-image" alt="DEVO Logo" src="/Applications/MAMP/htdocs/D0.1/images/DEVOorig.png"/>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li></li>
<li><span class="glyphicon glyphicon-user"></span></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span></li>
<li>
<div class="form-group form-inline">
<input type="text" class="form-control" placeholder="Search products..">
</div>
<button type="submit" class="btn btn-secondary" id="product-search-btn"><span class="glyphicon glyphicon-search"></button>
</li>
</ul>
</div>
</div>
<nav class="navbar navbar-inverse navbar-fixed-top" id="info-head">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Tobi's Site</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>About Us</li>
<li>FAQ's</li>
<li>Contact Us</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Work With Us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Drivers</li>
<li>Partners</li>
<li>In House</li>
</ul>
</li>
<li>T's & C's</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
</div>
</nav>
Use the Bootstrap affix component to pin the 2nd navbar when the page is scrolled. Then add the CSS for the affix class to position the navbar when it's pinned to the top.
$('#nav2').affix({
offset: {
top: 50
}
});
2 navbars example: http://codeply.com/go/hi6zhTU4h2
When I resize the browser the navbar links that say "FIX" drop down into one column. Does anyone know how I can prevent that and keep the links on the same line?
Here is the codepen: http://codepen.io/anon/pen/VvJXNw
<!-- navbar -->
<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="#">
<div class="logo"><img style="width: 21px" src="logo" /></div>
</a>
</div> <!-- end of navbar header -->
<!-- these links dont stay on the same line -->
<ul class="nav navbar-nav pull-left">
<li><a id="<%= #users ? 'active-page' : ''%>" href="/">FIX</a></li>
<li><a id="<%= #users ? 'active-page' : ''%>" href="/">FIX</a></li>
<li><a id="<%= #about ? 'active-page' : ''%>" href="/">FIX</a></li>
</ul>
<!-- 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 navbar-right">
<li>Sign up</li>
<li>Sign in</li>
</ul>
<form class="navbar-form navbar-right hidden-xs hidden-sm" role="search">
<div class="form-group">
<div class="search">
<span class="fa fa-search"></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You need to place these links inside the navbar-header, then you can use a helper such as navbar-btn to position. Also don't use pull-*, use navbar-left or navbar-right. See Docs.
See working example Snippet.
<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.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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 alt="" src="/" />
</a>
<div class="nav navbar-left"> Some Link
Some Link
Some Link
</div>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-right">
<li>Sign up
</li>
<li>Sign in
</li>
</ul>
<form class="navbar-form navbar-right hidden-sm hidden-xs" role="search">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i></span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
</form>
</div>
</div>
</nav>
Don't use in navbar pull-left.
In custom bootstrap navbar default style is on left.
If you want use two side just add navbar-right to right side of nav.
Bootstrap navbar with form
Demo here:
For some reason, the menu icon is not expanding in mobile view, not sure what I did wrong. Can someone take a look at let me know? Thanks!
http://10.60.53.115/staging/sijie/Monster_UX_bootstrap/index.html
HTML:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- 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">
<i class="fa fa-bars"></i>
</button>
<img class="img-responsive" src="http://media.newjobs.com/homepage/images/Monster_UX/logo.png">
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right hidden-xs">
<li role="presentation" class="active">About Us</li>
<li role="presentation">What We Do</li>
<li role="presentation">Join the Team</li>
<li class="form">
<form class="search-container" action="//llamaswill.tumblr.com/search">
<input id="search-box" type="text" class="search-box" name="q" />
<label for="search-box"><span class="glyphicon glyphicon-search search-icon"></span></label>
<input type="submit" id="search-submit"/>
</form>
</li>
</ul>
</div>
</div><!--end container-fluid-->
You've set your IMG in the incorrect section of the navigation bar. In order for the mobile menu to activate on click you need to move the IMG link to the class="navbar-toggle" button.
.navbar .navbar-header .navbar-toggle {
padding: 6px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<img src="http://placehold.it/40x20/000/000">
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">About Us <span class="sr-only">(current)</span>
</li>
<li>What We Do
</li>
<li>Join the Team
</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>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>