I can easily create a nav search bar in Bootstrap 3. But I'd like to build something very similar to Google Developers search bar.
I could of course try to look at google's page and factor out the one that pertains to the search box, but with my current css skill that will take me forever.
In particular how would I create a search nav bar in Bootstrap 3 with the following features?
On large screens I need the whole search box to take up whatever remaining width is left (brand and menus on the left, user account button on the right).
On Focus HTML drop down would show similar to Google Developers site.
I'd like the user to have the option to select a filter in the HTML drop down and it would show as a tag in the search bar as shown below:
On smartphone screens the search box will collapse to a search button that when clicked it will expand similar to Google Developers site. (Separate from the collapse of the menus).
I can take care of the JS part (using angular), I just need to have an idea on the css part. I already search this site (http://tympanus.net/codrops/2010/07/14/ui-elements-search-box/), but i'd like to implement this with the bootstrap classes already in place.
Here's what I have so far with a help from Fizzix:
JSFiddle Demo
HTML:
<nav class="navbar navbar-inverse 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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Others <span class="sr-only">(current)</span></li>
<li>Categories</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="search-box">
<input value="Search" type="text" class="form-control" />
<i class="glyphicon glyphicon-search"></i>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
CSS:
body {
margin: 20px;
background: #455a64;
}
.search-box {
position: relative;
}
.search-box .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
left: 15px;
top: 0px;
}
.search-box .glyphicon:before {
color: white;
transition: all 0.2s linear;
}
.search-box input {
color: #fff;
padding-left: 60px;
background: #546e7a;
border:0;
outline: none !important;
transition: all 0.2s linear;
}
.search-box input:focus {
background: #fff !important;
outline: 0;
color: #333;
}
.search-box input:focus + .glyphicon:before {
color: #333;
}
.search-box input:hover {
background: #78909c;
}
Your question will most likely be closed since you have not tried to do this yourself first and you're basically asking us to do all the hard work without any attempt
I tried to mimic most of the styles, although the placeholder colour is the tricky part. Instead, I added the value of Search to the input and styled the colour. You can handle the placeholder part through Angular instead.
Unfortunately I'm strapped for time at the moment and am unable to get the dropdown working on focus.
If you would like a full breakdown of the CSS, just let me know and I can go through it step by step with you.
WORKING DEMO
CSS:
.search-box {
position: relative;
}
.search-box .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
left: 15px;
top: 0px;
}
.search-box .glyphicon:before {
color: white;
transition: all 0.2s linear;
}
.search-box input {
color: #fff;
padding-left: 60px;
background: #546e7a;
border:0;
outline: none !important;
transition: all 0.2s linear;
}
.search-box input:focus {
background: #fff !important;
outline: 0;
color: #333;
}
.search-box input:focus + .glyphicon:before {
color: #333;
}
.search-box input:hover {
background: #78909c;
}
HTML:
<div class="search-box">
<input value="Search" type="text" class="form-control" />
<i class="glyphicon glyphicon-search"></i>
</div>
Related
I'm new to web applications, so I don't know HTML, CSS and JS good enough to handle problems by myself yet. I followed some YT tutorial to create collapsible sidebar, but I don't know why it is collapsed as default and i can't make it opened. I think that the problem is that i don't know what exactly is going on in my code. Can you tell me what I'm doing wrong and help me understand how this should work?
HTML:
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<a href="#selectGameSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">
<i class="fa fa-fw fa-gamepad"></i> Select something</a>
<ul class="collapse list-unstyled">
<li>
Link1
</li>
<li>
Link2
</li>
<li>
Link3
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-home"></i> Home
</li>
<li>
<i class="fa fa-fw fa-user"></i> My profile
</li>
<li>
<i class="fa fa-fw fa-question-circle"></i> FAQ
</li>
<li>
<i class="fa fa-fw fa-phone"></i> Contact
</li>
<li>
<i class="fa fa-fw fa-sign-out-alt"></i> Logout
</li>
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<!-- some code -->
</div>
</div>
CSS:
#sidebar-wrapper{
z-index: 1;
position: fixed;
width: 0;
height: 100%;
overflow-y: hidden;
transition: 0.15s;
background-color: var(--black) ;
font-size: 1em;
}
#sidebar-wrapper .sidebar-header {
padding: 20px;
background: var(--black);
}
#page-content-wrapper{
width: 100%;
position: absolute;
padding: 15px;
transition: 0.15s;
color: black;
}
#wrapper.menuDisplayed #sidebar-wrapper{
width: 250px;
}
#wrapper.menuDisplayed #page-content-wrapper {
padding-left: 250px;
}
.sidebar-nav{
padding: 0;
list-style: none;
}
.sidebar-nav li{
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a{
display: block;
text-decoration: none;
color: var(--gray);
}
.sidebar-nav ul li a {
font-size: 0.9em;
display: block;
color: var(--lightGray)
}
.sidebar-nav li a:hover{
color: #fff;
background: var(--gray);
}
.sidebar-nav ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: var(--deepBlue);
}
JS:
$("#menu-toggle").click(function(e){
e.preventDefault();
$("#wrapper").toggleClass("menuDisplayed");
});
Ok, I'll tell you how to achieve what you want (2 methods) and then I’ll explain how your code works.
method 1
in your first div (#wrapper), add the class menuDisplayed:
<div id="wrapper" class="menuDisplayed">
method 2
you can also change your CSS to do what you want and make the "menu displayed" the default style:
replace "menuDisplayed" with "menuHidden" throughout your code, so that it continues to make sense semantically
update styles for #sidebar-wrapper giving it a value other than 0 for width.
#sidebar-wrapper{
z-index: 1;
position: fixed;
width: 250px;
height: 100%;
overflow-y: hidden;
transition: 0.15s;
background-color: var(--black) ;
font-size: 1em;
}
now change styles for #page-content-wrapper too, so that it leaves room for your sidebar:
#page-content-wrapper{
width: 100%;
position: absolute;
padding: 15px;
padding-left: 250px; /* leaving 250px of space on the left */
transition: 0.15s;
color: black;
}
the next step is to make the closed sidebar have the right styles:
#wrapper.menuHidden #sidebar-wrapper{
width: 0; /* the element of id 'wrapper' and class 'menuHidden' must have width 0 */
}
#wrapper.menuHidden #page-content-wrapper {
padding-left: unset; /* clears the attribute that gave space to the sidebar */
}
now I'll explain how your code works (before you change the sidebar behavior):
your CSS tells the browser that the element with the sidebar-wrapper id should have null width (so it does not appear as soon as you load the page), but it also says that the element with id sidebar-wrapper should be 250px wide when inside another element that has the wrapper id and the menuDisplayed class.
the magic is in your javascript: it tells the browser to toggle the menuDisplay class of the element with id wrapper, which activates the CSS style that makes your sidebar 250px wide, and so it appears. when toggled again, the menuDisplayed class is deleted from the element with id wrapper and your sidebar returns to having width equal to 0.
the $("#menu-toggle").click adds an event listener for the 'click' event using jQuery. when this event is fired (someone clicks in the element with the menu-toggle id), the callback function is executed:
function(e){
e.preventDefault(); // prevents the default behavior of the element (if it is an anchor (<a></a>), it loses the ability to change pages, etc.)
$("#wrapper").toggleClass("menuDisplayed"); // toggles the class 'menuDisplayed' of the element with id 'wrapper'
}
You can add the class menuDisplayed to the navbar (with id #wrapper) initially, so on page load, it will be displayed.
<div id="wrapper" class="menuDisplayed">
you should add the class menuDisplayed to your #wrapper. then it can show by default.
<div id="wrapper" class="menuDisplayed">
full example can be found here :http://jsfiddle.net/9ojvnutc/
I have a fixed-top navbar, i made a function to make it shrink on scroll but i have a problem, the ul class in the navbar is not shrinking properly, i gave it a line height to align it vertically with the navbar-brand but i can't figure out how to fix that when the navbar shrinks, here is my code:
$(document).ready(function(){
var scrollTop = 0;
$(window).scroll(function(){
scrollTop = $(window).scrollTop();
$('.counter').html(scrollTop);
if (scrollTop >= 100) {
$('#global-nav').addClass('scrolled-nav');
} else if (scrollTop < 100) {
$('#global-nav').removeClass('scrolled-nav');
}
});
});
#global-nav{
height: 150px;
-webkit-transition: height .5s, line-height .5s;
transition: height .5s, line-height .5s;
}
.navbar-brand img{
height:95px;
}
.navbar-default .navbar-nav>li>a{
line-height: 95px;
}
.navbar-brand
img{
display: inline-block;
-webkit-transition: all .5s;
transition: all .5s;
}
.scrolled-nav .navbar-brand img{
height: 50px;
}
.scrolled-nav{
height: 100px !important;
line-height: 100px !important;
}
.counter{
width: 20px;
height: 20px;
background: black;
color: #fff;
position: fixed;
top: 120px;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav id="global-nav" class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container">
<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 page-scroll" href="#page-top"><img src="http://placehold.it/350x150"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="active"> LINK 1 </li>
<li> LINK 2 </li>
</ul>
</div>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Your issue is
.navbar-default .navbar-nav>li>a {
line-height: 95px;
}
You need that to be 70px when small to account for the padding (or remove the padding when small).
Simple answer:
.navbar-default.scrolled-nav .navbar-nav>li>a {
line-height: 70px;
}
This is tricky to replicate using code snippets, but the CSS that is controlling the height of the nav items is this:
.navbar-default .navbar-nav>li>a {
line-height: 95px;
}
Because this code uses line-height to center the text in the nav buttons, this is the property you'll need to adjust the shrink their height.
Alternatively, you can separate line height from the shrinking nav and use padding-top and padding-bottom, and adjust these properties when the scrolled class is added.
Sorry for the bad title, I didn't really know how to explain it concisely.
I'm trying to make a navbar that only shows up when hovering over an icon that appears only when scrolling upwards and stays visible as long as I have my cursor over it (over the navbar or the icon).
The problem is, I want it to be always visible in the first section of the website.
It works ok when first loading it, but after scrolling down and then returning up when I hover over the navbar and then I move the cursor outside it disappears.
Here's a fiddle so you can take a look: https://jsfiddle.net/kksp9pbu/1/
Here's the HTML:
<div id="menu-trigger" class="hidden-menu trigger"><i class="fa fa-bars"></i></div>
<nav class="navbar navbar-default navbar-fixed-top" id="main-nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<main>
<section class="container-fluid">
<div class="row">
<div class="col-xs-12" id="header">
<h1>The navbar should always be visible here</h1>
</div>
</div>
</section>
<section class="container-fluid">
<div class="row" id="about">
<div id="about-l"><h3>About</h3></div>
</div>
</section>
<section class="container-fluid">
<div class="row" id="portfolio">
<div id="about-l"><h3>Portfolio</h3></div>
</div>
</section>
CSS in case you need it:
#menu-trigger {
position: fixed;
top: 15px;
height: 40px;
right: 20px;
z-index:1;
cursor: pointer;
}
.fa-bars{
color: #fff
}
#main-nav {
height: 70px;
background-color: rgba(0, 119, 124, 0.46);
border-bottom: 3px solid #111;
}
.navbar-fixed-top {
top:0px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hidden-nav {
top:-75px !important;
}
.trigger {
opacity: 1;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hidden-menu {
opacity: 0;
}
#main-nav a:link,
#main-nav a:visited {
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
}
.navbar-nav {
margin-left: 80px;
}
.navbar-nav li {
padding: 30px 0 0 100px;
}
.navbar-nav>li>a {
padding: 0 0 5px 0 !important;
color: #fff !important;
}
.navbar-nav a:hover,
.navbar-nav a:active {
border-bottom: 1px solid #333;
}
.navbar-brand {
transition: color 0.2s ease;
color: #fff!important;
font-size: 2em !important;
font-weight: 100 !important;
}
.navbar-brand:hover {
color: #ffb100 !important;
}
/*----HEADER----*/
#header {
text-align: center;
height: 100vh;
background-color: #333;
background-color: #333;
color: #fff;
padding-top: 15%;
}
#header h1 {
font-size: 2.8em;
font-weight: 100;
}
/*----ABOUT----*/
#about{
height:100vh;
background-color:#39bebe;
}
#portfolio{
height:100vh;
background-color:#009eee;
}
And here's the jQuery code:
$(document).ready(function(){
var lastScrollTop = 0;
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
var aboutOffset=$("#about").offset().top;
if(scroll<=aboutOffset){ // if I haven't reached #about section yet
$("#main-nav").removeClass("hidden-nav");
} else {
$("#main-nav").addClass("hidden-nav"); //hide the navbar
function hideIt(){
$("#menu-trigger").addClass("hidden-menu"); //hide the trigger
};
if (scroll > lastScrollTop){ //scrolling down
setTimeout(hideIt, 2000);
} else {
$("#menu-trigger").removeClass("hidden-menu");
}
lastScrollTop = scroll;
$("#menu-trigger, #main-nav").on("mouseover", function(){ //if I hover over the trigger or the navbar
$("#main-nav").removeClass("hidden-nav"); // I leave the navbar visible
});
$("#menu-trigger, #main-nav").on("mouseout", function(){ //if I move the cursor out of the trigger or the navbar
$("#main-nav").addClass("hidden-nav"); // hide the navbar
});
}
}); // END $(window).scroll();
}); //END $(document).ready();
You have a function that it does something when you do scroll.
$(window).scroll(function(event) {
...
}
And you have a conditional that when it's false, this sets somthing behaviors.
if(scroll<=aboutOffset){
$("#main-nav").removeClass("hidden-nav");
} else {
...
}
The behavior that it's doing to hide the navbar is this:
$("#menu-trigger, #main-nav").on("mouseout", function(){
$("#main-nav").addClass("hidden-nav");
});
You need to delete this behavior ;-)
UPDATE
Or, a better solution would be this:
if(scroll<=aboutOffset){
$("#main-nav").removeClass("hidden-nav");
$("#menu-trigger, #main-nav").off("mouseout");
} else {
...
}
I have troubles with making an opening mobile version full width of my navigation bar. i tried making it every way possible unsuccessfully with out knowing what my problem is!
i tried to use media but i have no idea what to do to make it looks like the hamburger style that come and goes. i have to mention that i use pure css so i lack of knowledge in JS.
if someone will to help me I will be greathful, because right now i stuck and i dont know what to so about that.
<nav class="navi" id="target">
<div class="menu">
<a class="link-1" href="#">home</a>
<a class="link-1" href="#">info</a>
<a class="link-1" href="#">contact</a>
<div class="logo">
<img alt="Brand" src="logo2.png" height="40px" width="60px">
</div>
</div>
</nav>
this is the css for the navigation:
width:100%;
margin-top: 0;
padding: 10px;
text-align: center;
font-family: arial;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
position:fixed;
text-align:right;
z-index:10;
}
.navi{
background: rgba(0,0, 0, 0.5);
}
.navi:hover{
background-color: rgba(0,0,0, 1);
}
.link-1 {
transition: 0.3s ease;
color: #fff;
font-size: 16px;
text-decoration: none;
border-top: 1px solid ;
text-align:right;
padding: 20px 0px;
margin: 0 20px;
font-weight: italic;
letter-spacing:2px;
}
.link-1:hover {
border-top: 2px solid #fff;
text-decoration: none;
color:#fff;
padding: 3px 6px;
}
.logo{
text-align:left;
margin-left:35px;
margin-top:-25px;
thanks a lot!
I would suggest using Bootstrap 3. Go to getbootstrap.com Make sure to include bootstrap's css and javascript pages into your project. The code for your hamburger style nav bar should look something like this:
<div class="container" id="main">
<div class="container">
<div class="navbar navbar-fixed-top navbar-default">
<ul class="nav nav-pills unstyled">
<li class="">Skills</li>
<li>Projects</li>
<li>Contact </li>
</ul>
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
Note: You will only see the hamburger style if you resize your browser window below the breakpoint.
I have written a navigation bar based on the example given in the components link in Bootstrap. But the navigation bar does not collapse in a right way as it is supposed to do. As shown in the process below:
State 1
State 2
State 3
the navigation bar is not collapsed sharply, rather, it will become 2 columns first and then collapse.
I have found a same problem that has been asked previously in stackoverflow. It seems like the problem is caused by the default breaking point defined in bootstrap. However, I do not know where to change the breaking point and how can I do it.
I am using the latest bootstrap version, and following is the snippet of my navigation bar code.
Thanks in advance for any help and advice!
<!--navigation bar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header"><!--brand and toggle get grouped for better mobile display-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navItems">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a><!--end of logo-->
</div><!--end of logo & collapsing logic-->
<div class="collapse navbar-collapse" id="navItems">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul><!--end of menu list-->
<form class="navbar-form navbar-left">
<input type="text" class="form-control" placeholder="Search on this site" id="searchInput ">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></button>
</form><!--end of search bar-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> My Account <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon glyphicon-wrench"></span> Settings</li>
<li><span class="glyphicon glyphicon-refresh"></span> Update Profile</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-off"></span> Sign Out</li>
</ul><!--end of sub menu-->
</li><!--end of dropdown menu-->
</ul><!end of the user account menu-->
</div><!--end of collpased nav-->
</div><!--end of container-->
</nav><!--end of navbar-->
Update
I have looked into the solution provide by this link, which does not work in the newest version of Bootstrap.
And I have locate the code block which defines the breakpoint of the collapsing effect:
#media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: 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;
}
}
And I tried to modify the defined min-width, however I changed, it just does not work.
I finally figured it out:
To do this in the latest version:
I have modified three parts in the css file:
First you need to set when the navbar-header will float to left (in may case 1000px):
#media (min-width: 1000px) {
.navbar-header {
float: left;
}
}
Then you will need to decide when all the menu button will be disappeared:
#media (min-width: 1000px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: 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;
}
}
Last you need to define when the navbar-toggle will take effect:
#media (min-width: 1000px) {
.navbar-toggle {
display: none;
}
}
Then just wait to see the magic happen:
When the screen reached the 1000px threshold:
From
To
Seems like you should be able to override the default navbar collapse point like this.. (Assuming 1000 pixels in the new collapse point):
#media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.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;
}
.collapse.in{
display:block !important;
}
}
Demo: http://bootply.com/UQaiG0oNTR
I suggest installing Bootstrap with SASS, in this way mixins are separeted and easier to manage.
With this configuiration the breaking-point is in your _variable mixins, and the _navbar mixin just picks up the variable by default.
Overriding will work but it's probably neater if you keep coherency with bootstrap mixins.
Read the documentation that you yourself linked to!
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.