I am quite new to bootstrap and I was wondering if anyone could give some advice as to how I would be able to place my navbar underneath my header. This is my current code for the two:
Header:
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>HOST</h1>
<h3>two is better than one</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span>
</li>
</ul>
</div>
</div>
</div>
</div>
Navbar:
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<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 topnav" href="/">Host</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Login
</li>
<li>
Sign up
</li>
</ul>
<form class="navbar-form navbar-right" 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>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Any kind suggestions and tips would be greatly appreciated. I am also fairly new to programming so good explanations go along way! =)
Just change
navbar-fixed-top
to
navbar-top
Edit for the second answer:
Change your to
<nav id="myNav" class="navbar navbar-default" role="navigation">
And you will need to add jquery reference and this little script.
var headerHeight = 200;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > headerHeight) {
$('#myNav').removeClass('navbar-top');
$('#myNav').addClass('navbar-fixed-top');
} else {
$('#myNav').removeClass('navbar-fixed-top');
$('#myNav').addClass('navbar-top');
}
});
Basically what this does is checks how much you have scrolled from top and when you pass your header height it fixes the nav to stay on top. You just need to change the headerHeight value to your header height.
<!DOCTYPE html>
<html >
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.navbar-fixed-top{
position:static;
}
</style>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>HOST</h1>
<h3>two is better than one</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<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 topnav" href="/">Host</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Login
</li>
<li>
Sign up
</li>
</ul>
<form class="navbar-form navbar-right" 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>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
</html>
Related
My html markup is:
<div class="row">
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
</div>
<!-- navbar-header -->
<nav class="collapse navbar-collapse navigation" id="navbar-collapse">
<ul class="nav navbar-nav menu">
<li>Home</li>
<li>Features</li>
<li>Lifestyle</li>
<li>Travel</li>
<li>Music</li>
<li>About</li>
<li>Contact Me</li>
</ul>
</nav>
</div>
<!-- navbar-collapse -->
<div class="col-sm-4 navigation" id="social-icons">
<ul class="menu">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-tumblr"></i>
</ul>
</div>
<!-- social-icons -->
</div><!-- row -->
</div>
<!-- container -->
</nav>
While resizing window, the lists stack probably because i have used the grid system.
But what I want to achieve is that the responsive menu(the three lines) be pulled to the left and the icons remain at their place.
I am trying to learn web development on my own. Any help/suggestion would be appreciated.
Edit 1:
After using media query to set the position of the icons to relative, i have achieved this.
I want the icons to be on the right side and the menu to be on the left side.
set position:relative to the parent div then Try with this
#media (max-width:767px){
#social-icons {
position:absolute;
top:15px; /*or whatever you need*/
}
}
Try with the code snippet
.navbar-toggle {
background: #000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.navbar-toggle {
background: #000;
float:left;
}
#social-icons {
position: absolute;
top: 15px;
right: 15px;
}
</style>
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
</div>
<!-- navbar-header -->
<nav class="collapse navbar-collapse navigation" id="navbar-collapse">
<ul class="nav navbar-nav menu">
<li>Home</li>
<li>Features</li>
<li>Lifestyle</li>
<li>Travel</li>
<li>Music</li>
<li>About</li>
<li>Contact Me</li>
</ul>
</nav>
</div>
<!-- navbar-collapse -->
<div class="col-sm-4 navigation" id="social-icons">
<ul class="menu">
<i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-instagram"></i> <i class="fa fa-pinterest"></i> <i class="fa fa-heart"></i> <i class="fa fa-google-plus"></i> <i class="fa fa-tumblr"></i>
</ul>
</div>
<!-- social-icons -->
</div>
<!-- container -->
</nav>
<!--/.nav-collapse -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I'm new to Bootstrap and I want to change the height of my navbar. I've seen some topics about that but nothing solved my problem. I took the navbar code from a theme so i don't understand all of the code yet. Tried to change the height of navbar class but there are many of them so i'm quite confused.
navbar class from index.html :
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
<div class="container" >
<!-- Brand and toggle get grouped for better mobile display -->
<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-left" href="#"><img src="images/_ressources/logo.svg" height="50px"></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>
ACCUEIL
</li>
<li>
BOUTIQUE
</li>
<li>
CONTACT
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
MON COMPTE
</li>
<li>
<div class="input-group-btn">
<button type="button" class="btn btn-default btn-lg" style="background-color:orange">
<span class="glyphicon glyphicon-lock" ></span>
</button>
</div>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recherche un produit">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container -->
</nav>
You can apply the height css attribute to your navbar class and it will work
However you should do this in a separate css file and not modify
bootstrap's own css.
One thing that you should keep in mind is that when you include the css file in your html is that, it should be included after the bootstrap.min.css so that it will override bootstrap css.
.navbar {
height: 80px;
}
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
<div class="container" >
<!-- Brand and toggle get grouped for better mobile display -->
<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-left" href="#"><img src="images/_ressources/logo.svg" height="50px"></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>
ACCUEIL
</li>
<li>
BOUTIQUE
</li>
<li>
CONTACT
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
MON COMPTE
</li>
<li>
<div class="input-group-btn">
<button type="button" class="btn btn-default btn-lg" style="background-color:orange">
<span class="glyphicon glyphicon-lock" ></span>
</button>
</div>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recherche un produit">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container -->
</nav>
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:
In bootstrap 3, i have a nav bar, with an form bar.
I try to add another section just to the right of the search button.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12">
<nav role="navigation" class="navbar navbar-default pull-right">
<div class="container-fluid">
<form class="navbar-form" role="search">
<div class="checkbox">
<label>
<input type="checkbox" id="inactiveLodger">Locataire inactif</label>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Rechercher" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button id="lodgerSearch" type="button" class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Paul Smith<b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-lock"></i> Changer mot de passe
</li>
<li id="logout"><i class="glyphicon glyphicon-log-out"></i>Déconnexion
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
Righ now, the other section is below, like you can see on the image.
If you want to use float:right that is what navbar-right does, simply invert order of form and dropdown. right floated element must be placed BEFORE others in order to make others floats around them.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12">
<nav role="navigation" class="navbar navbar-default pull-right">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Paul Smith<b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-lock"></i> Changer mot de passe
</li>
<li id="logout"><i class="glyphicon glyphicon-log-out"></i>Déconnexion
</li>
</ul>
</li>
</ul>
<form class="navbar-form" role="search">
<div class="checkbox">
<label>
<input type="checkbox" id="inactiveLodger">Locataire inactif</label>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Rechercher" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button id="lodgerSearch" type="button" class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</nav>
</div>
Unless you're applying other changes to the navbar, you shouldn't need the extra classes you've applied (col-sm-12/pull-right/etc). Just use the default classes and structure and but reorder your right floated navigation elements so they're in the order you want.
See example.
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<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>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Paul Smith <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-lock"></i> Changer mot de passe
</li>
<li><i class="glyphicon glyphicon-log-out"></i> Déconnexion
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="inactiveLodger">Locataire inactif</label>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Rechercher" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button id="lodgerSearch" type="button" class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
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>