I am learning bootstrap 4 and found a navbar via this link: https://carrabbasatlanticcanada.com/
Have really struggled to find a scrollable nav for bootstrap4 that has styles changed on scroll (no logo and position fixed on mobile view).
I have created a navbar like the one in the link that uses 2 seperate navs that are styled so it works the same way: a visible nav and logo, then a scrollable nav with no logo, and fixed nav and logo on mobile devices.
I feel this is quite of a minimal code solution for bs4 and may get around problems with position sticky not working in internet explorer?
I am still fairly new to coding. Is this code OK?
Is it OK to use 2 seperate navs or is there a better solution using 1 nav and some javascript for styling?
Any feedback or possible improvement most welcomed!
HTML:
<nav class="navbar navbar-expand-md mynav">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav text-center">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#news">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div id="navbar2">
Home
News
Contact
</div>
<!--Javascript for scrollable nav-->
<script type="text/javascript">
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 120 || document.documentElement.scrollTop > 120) {
document.getElementById("navbar2").style.top = "0";
} else {
document.getElementById("navbar2").style.top = "-50px";
}
}
</script>
CSS:
/Fixed navbar/
.mynav{
background-color: black;
}
.navbar .navbar-nav li a, .navbar-brand{
color: white;
}
.navbar-toggler{
background-color: green;
}
/*Scrollable navbar*/
#navbar2 {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: -450px; /* Hide the navbar 50 px outside of the top view */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#navbar2 a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
#navbar2 a:hover {
background-color: #ddd;
color: black;
}
/media queries to make the pop down nav disappear on small screens and the hambrger to be fixed/
#media screen and (max-width: 600px){
#navbar2{
display: none;
}
.mynav{
position: fixed;
width: 100%;
}
.top-bar{
display: none;
}
.header-area{
background-color: #000;
height: 20px;
}
}
#media screen and (min-width: 600px){
#navbar2{
visibility: visible;
}
.navbar-toggler{
visibility: hidden;
}
}
Related
Hello! Recently i've been building a website portfolio and have made a burger menu!
In the time so building the burger menu i've had troubles with positioning the logo and the social icons, above and below the href links.
Here is some images to understand what it looks like -
NavBar (full) :
NavBar (burger before) :
NavBar (burger after) :
NavBar (burger after EXAMPLE) :
I understand that this is happening because they are all located inside nav.
How can I modify it to have the logo above the text, and the icons below the text. I tried going around trying JS to add style to logo and icons but it seems to not work. Also changing the css in the media query (to when the burger pops up) can mess up the look "before" the burger is pressed.
html code -
<div class="logo"><img src="src/assets/TWINLOGO.png" style="width: 100px;height: 100px;"></div>
<div class="openMenu"><i class="fa fa-bars" style="color:black;"></i></div>
<ul class="mainMenu">
<!-- Center-aligned links -->
<div class="nav-center">
<div class="navLogo"><img src="src/assets/TWINLOGO.png" style="width: 100px;height: 100px;"></div>
</div>
<!-- Left-aligned links -->
<li>Contact</li>
<li>About</li>
<li>Store</li>
<div class="closeMenu"><i class="fa fa-times"></i></div>
<!-- Right-aligned links -->
<div class="nav-right">
<span class="icons">
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-github"></i>
</span>
</div>
</ul>
</nav>
css code -
/* Fourth Media Querie */
#media(max-width: 805px){
nav .logo{
margin: 6px;
font-size: 25px;
cursor: pointer;
display:inherit;
}
nav .mainMenu {
height: 100vh;
position: fixed;
top: -100%;
right: 0;
left: 0;
z-index: 10;
flex-direction: column;
justify-content: center;
align-items: center;
background: white;
transition: top 1s ease;
display: flex;
}
nav .mainMenu .closeMenu {
display: block;
position: absolute;
top: 20px;
right: 20px;
color:black;
}
nav .openMenu {
display: block;
}
nav .mainMenu li a {
background: none;
font-size: 2rem;
}
nav .mainMenu li a:hover {
background: none;
color: rgb(0, 110, 255);
font-size: 2.5rem;
transition: ease all .5s;
}
.icons i {
display: inline-block;
padding: 12px;
color:rgb(0, 0, 0);
}
footer .contact .holder .info{
font-size:0.8rem;
}
}
js code -
const mainMenu = document.querySelector('.mainMenu');
const closeMenu = document.querySelector('.closeMenu');
const openMenu = document.querySelector('.openMenu');
openMenu.addEventListener('click',show);
closeMenu.addEventListener('click',close);
function show(){
mainMenu.style.display = 'flex';
mainMenu.style.top = '0';
}
function close(){
mainMenu.style.top = '-100%';
}
i'm creating a website and want to have a hero image that takes up 100% height of the viewport at different device heights.
I have used the vh property in CSS to set both the bootsrap navbar and hero image to 100% of the viewport height, which has worked as intended but I think it's has some unintended consequences.
In a mobile view when I click the toggler to bring the mobile navbar down the height of the hero image adjusts, but when I try to close the navbar again the toggler completely dissapears, I think this is because of the hero image then trying to take the entirety of the viewport height not leaving space for the toggle icon?
The 100vh also means that the navbar cannot be sticky, when the screen scrolls past the hero image the navbar stays - it cannot pass the hero image.
I'm assuming both these issues stem from them both being encased in a 100vh div together, but have tried to find a solution to no avail.
Is there another workaround for what I am trying to achieve that would be better practice, or is there something I have done wrong in my markup.
HTML
<!-- Creates section for navbar and the hero image to take up 100% of the height of viewports - responsive and works at all screen sizes -->
<div class="landingBanner">
<!-- open the navbar -->
<nav class="navbar navbar-expand-md" id="home">
<!-- set content of the navbar fluid -->
<div class="container-fluid">
<!-- set the content of the navbar to width 80% -->
<div class="content" id="navbarContent">
<!-- hamburger button that appears in medium screens - click to toggle navbar so that it does not take up so much room on mobile devices -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<!-- font awesome hamburger icon -->
<i class="fas fa-bars"></i>
</button>
<!-- everything inside div is toggleable with the button -->
<div class="collapse navbar-collapse" id="navbarContent">
<!-- mx-auto centers the navbar -->
<ul class="navbar-nav mx-auto">
<li class=" nav-item ">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item ">
<!-- One page referenced by using the ID of the target section -->
<a class="nav-link" href="#aboutUs">About Us</a>
</li>
<!-- drop down for acquisition criteria -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#whatWeDo" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">What We Do</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#whatWeDo">Information</a></li>
<li><a class="dropdown-item" href="acquisitionCriteria.html">Acquisition Criteria</a></li>
</ul>
</li>
<li class="nav-item ">
<a class="nav-link" href="#theTeam">The Team</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#contactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- End of navbar -->
<!-- Beginning of hero image -->
<section class="banner">
<div class="content bannerContent">
<!-- Puts logo to the responsive width of content -->
<img src="img/logo.png" alt="organization logo" id="logo">
<!-- div for arrow centers the arrow and puts it at the bottom of the div - responsive -->
<div class="arrow">
<!-- font awesome arrow -->
<i class="fas fa-angle-down"></i>
</div>
</div>
</section>
<!-- end of hero image -->
</div>
<!-- end of responsive landing section -->
CSS
/*
*
* navigation bar, branding and landing hero image
*
*/
.landingBanner {
height: 100vh;
width: auto;
}
.navbar,
.navbar-nav {
background-color: black;
text-align: center;
}
.navbar {
padding-top: 1%;
padding-bottom: 1%;
}
.navbar-brand {
color: #EA1830;
text-decoration: none;
}
.nav-link {
color: white;
margin-left: 5px;
margin-right: 5px;
}
.nav-link:hover {
color: #EA1830;
font-weight: bold;
}
.dropdown-menu {
background-color: black;
}
.dropdown-item {
color: white;
}
.dropdown-item:hover {
color: #EA1830;
font-weight: bold;
background-color: black;
}
.fa-bars {
color: white;
font-size: 30px;
}
#logo {
margin: 0 auto;
width: 100%;
height: auto;
}
.banner {
background-image: url("../../img/banner.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: auto;
}
.bannerContent {
padding-top: 5%;
text-align: center;
align-content: center;
color: #EA1830;
}
.bannerContent h1 {
font-size: 350%;
padding-bottom: 5%;
}
.arrow {
position: absolute;
bottom: 0px;
left: 50%;
}
.fa-angle-down {
font-size: 300%;
color: #EA1830;
}
Would really appreciate any help that someone may be able to provide, and hope it makes sense what i'm trying to achieve!
Can you please help me with making my existing header responsive? I've tried a lot, but nothing worked... Here is the HTML Code:
<header>
<div class="logo-container">
<img src="./img/logo.svg" alt="logo" />
<h4 class="logo">CVaS</h4>
</div>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="one.html">1. Link</a></li>
<li><a class="nav-link" href="two.html">2. Link</a></li>
<li><a class="nav-link" href="three.html">3. Link</a></li>
</ul>
</nav>
</header>
And here is the CSS Code:
body {
font-family: 'Poppins', sans-serif;
}
header {
display: flex;
width: 90%;
height: 10vh;
margin: auto;
align-items: center;
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
}
.logo {
font-weight: 400;
margin: 5px;
}
nav {
flex: 2;
}
.nav-links {
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 112%;
text-decoration: none;
}
I hope you can help me :) It would be great if the visitors could open the header through a burger icon...
Here you can simply use bootstrap to make it responsive.
Following is the code for adding the bootstrap.
You simply need to add the link and scripts in your head.
<head>
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</head>
Code for Responsive Header:
<div class="logo-container row">
<img src="./img/logo.svg" class="col-6" alt="logo" />
<h4 class="logo col-6">CVaS</h4>
</div>
And now the code for Responsive Navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Link-1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link-2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link-3</a>
</li>
</ul>
</div>
</nav>
Note: You won't need to add css style after this most likely.
If you don't want to use bootstrap then you can simply use media queries in css for different widths. You can make it responsive using position property in css along with media query.
if you can use bootstrap, you should use col-sm-[1 - 12], col-md-[1 - 12], col-lg-[1 - 12] and `col-xl-[1 - 12] classes.
Try this code for https://www.w3schools.com/howto/howto_js_topnav_responsive.asp this will be a great place to start if u just learning code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
You don't make something responsive. You build it responsive in the first place. Start by styling it from mobile, tablet and desktop. Use the CSS media queries.
You can use bootstrap (Free). Then for the menu area you may be best using something like the Navbar:
https://getbootstrap.com/docs/4.5/components/navbar/
This will then swap to a hamburger menu on small screens (if you want).
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.
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.