When I click on the navbar-collapse button, the elements from the navbar expand but they're not vertically aligned. How would you do this by keeping Link5 and Link6 right-aligned on the navbar?
Here's the JSFiddle: http://jsfiddle.net/sushiknives/yvgr92c3/1/
EDIT: nav-pills seems to be the issue. If I replace it with navbar-nav it automatically stacks vertically. In that case is there a way to recreate the nav-pills effect?
you can use flexbox property flex-direction : column to stack it vertical hope this will help you
body {
width: 100% margin: auto;
background-color: #f7f7f7;
}
.navbar {
background: #FFFFFF
}
.nav {
width: 100%
}
.nav a {
font-family: 'Raleway', sans-serif;
color: #5a5a5a;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
}
ul {
display: flex;
flex-direction: column;
}
.nav li {
display: inline;
}
.content {
margin-top: 100px;
}
<title>Navabar Test</title>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="texthover_test.css">
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="example">
<ul class="nav nav-pills">
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
</li>
<li class="pull-right">Link5
</li>
<li class="pull-right">Link6
</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Hope I understand your question. The li has to be full width of the parent element or you can shorten the width of the ul itself and make the li the same width as the ul. Adjust as needed.
.nav li{
display: block;
width: 100%;
}
See it stacked as you want
Related
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 a left side navbar in bootstrap, when clicking on a menu I want to show a section with jquery.show. Can't see why it doesn't show up:
<!DOCTYPE htwml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head>
<title>Nav</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style media="screen">
/* make sidebar nav vertical */
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
</style>
<style media="screen">
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Section 1</li>
<li class="active">Section 2</li>
<li class="active">Section 3</li>
</ul><!--/ #nav navbar-nav -->
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-sm-9">
<h2>Test</h2>
<form class="form-group" action="index.html" method="post" id="sections">
<div id="section_1" class="hidden">
section 1
</div>
<div id="section_2" class="hidden">
section 2
</div>
<div id="section_3" class="hidden">
section 3
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$('.mnu').click(function(event) {
var hash = $(this).attr("href") + "";
$(hash).show();
});
</script>
</body>
</html>
Clicking on any menu element will open the corresponding section.
You don't have to use show(). I even doubt that it would work. I suggest you to check which element of the mnu was clicked, get it's index and remove class of corresponding section (with the same index).
$('.nav').find('li').click(function() {
$('#sections').find('div').addClass('hidden');
$('#sections').find('div').eq($(this).index()).removeClass('hidden');
});
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
.hidden {
display: none;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Section 1</li>
<li class="active">Section 2</li>
<li class="active">Section 3</li>
</ul>
<!--/ #nav navbar-nav -->
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-sm-9">
<h2>Test</h2>
<form class="form-group" action="index.html" method="post" id="sections">
<div id="section_1" class="hidden">
section 1
</div>
<div id="section_2" class="hidden">
section 2
</div>
<div id="section_3" class="hidden">
section 3
</div>
</form>
</div>
</div>
</div>
This is a little funny that same code doesn't produce the same behavior.
http://jsfiddle.net/5n3ygvhe/
This is the jsfiddle code.
It is a good demo of spyscroll.
So I copy the codes into my local html file.
Here is my local html file. I am holding the file with appengine. I have checked that jquery, bootstrap.min.css and bootstrap.min.js is loaded correctly. And the version of jquery is 2.1.3 and bootstrap is 3.0.0.
I have tried other jsfiddle for spyscroll, exact same thing happens. Not working on local but working in jsfiddle.
When I scroll the page, the nav li doesn't reflect that and always stick to the last item.
<html>
<script src="bower_components/jquery/dist/jquery.js"></script>
<!-- <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> -->
<!-- <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> -->
<link rel="stylesheet" href="bower_components/bootstrap.min.css">
<script src="bower_components/bootstrap.min.js"></script>
<style>
.group {
background: yellow;
width: 200px;
height: 500px;
}
.group .subgroup {
background: orange;
width: 150px;
height: 200px;
}
#sidebar.affix {
top: 20px;
}
/* sidebar */
.bs-docs-sidebar {
padding-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
/* all links */
.bs-docs-sidebar .nav>li>a {
color: #999;
border-left: 2px solid transparent;
padding: 4px 20px;
font-size: 13px;
font-weight: 400;
}
/* nested links */
.bs-docs-sidebar .nav .nav>li>a {
padding-top: 1px;
padding-bottom: 1px;
padding-left: 30px;
font-size: 12px;
}
/* active & hover links */
.bs-docs-sidebar .nav>.active>a,
.bs-docs-sidebar .nav>li>a:hover,
.bs-docs-sidebar .nav>li>a:focus {
color: #563d7c;
text-decoration: none;
background-color: transparent;
border-left-color: #563d7c;
}
/* all active links */
.bs-docs-sidebar .nav>.active>a,
.bs-docs-sidebar .nav>.active:hover>a,
.bs-docs-sidebar .nav>.active:focus>a {
font-weight: 700;
}
/* nested active links */
.bs-docs-sidebar .nav .nav>.active>a,
.bs-docs-sidebar .nav .nav>.active:hover>a,
.bs-docs-sidebar .nav .nav>.active:focus>a {
font-weight: 500;
}
/* hide inactive nested list */
.bs-docs-sidebar .nav ul.nav {
display: none;
}
/* show active nested list */
.bs-docs-sidebar .nav>.active>ul.nav {
display: block;
}
</style>
<!-- Top Navbar -->
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">
Bootstrap 3.0 Skeleton
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="row">
<!--Nav Bar -->
<nav class="col-xs-3 bs-docs-sidebar">
<ul id="sidebar" class="nav nav-stacked">
<li>
Group A
<ul class="nav nav-stacked">
<li>Sub-Group 1</li>
<li>Sub-Group 2</li>
</ul>
</li>
<li>
Group B
<ul class="nav nav-stacked">
<li>Sub-Group 1</li>
<li>Sub-Group 2</li>
</ul>
</li>
<li>
Group C
<ul class="nav nav-stacked">
<li>Sub-Group 1</li>
<li>Sub-Group 2</li>
</ul>
</li>
</ul>
</nav>
<!--Main Content -->
<div class="col-xs-9">
<section id="GroupA" class="group">
<h3>Group A</h3>
<div id="GroupASub1" class="subgroup">
<h4>Group A Sub 1</h4>
</div>
<div id="GroupASub2" class="subgroup">
<h4>Group A Sub 2</h4>
</div>
</section>
<section id="GroupB" class="group">
<h3>Group B</h3>
<div id="GroupBSub1" class="subgroup">
<h4>Group B Sub 1</h4>
</div>
<div id="GroupBSub2" class="subgroup">
<h4>Group B Sub 2</h4>
</div>
</section>
<section id="GroupC" class="group">
<h3>Group C</h3>
<div id="GroupCSub1" class="subgroup">
<h4>Group C Sub 1</h4>
</div>
<div id="GroupCSub2" class="subgroup">
<h4>Group C Sub 2</h4>
</div>
</section>
</div>
</div>
</body>
<script>
$('body').scrollspy({
target: '.bs-docs-sidebar',
offset: 40
});
$("#sidebar").affix({
offset: {
top: 60
}
});
</script>
Add <!DOCTYPE html> on top of page.
And use $(function() {} wrapper for jQuery
I am using twitter Bootstrap for my website and it has a fixed navbar on top. When I am resizing window in my desktop browser, everything is fine. When I am opening the same site on mobile, I can see navbar-brand but not the toggle button. I'm posting screenshots for a better understanding (first one is desktop firefox and second one is android):
This is driving me crazy!!!
The Code:
.navbar-floating {
background: black;
color: #5b5656;
width: 100%;
border-radius: 0;
}
.navbar-floating .navbar-brand {
color: #810000;
font-size: 20px;
text-transform: uppercase;
}
.navbar-floating .navbar-brand:after {
content: ' | ';
color: #810000;
position: relative;
top: -3px;
}
#floating-nav {
position: fixed;
/* display: none; */
top: 0;
width: 100%;
height: 50px;
}
#floating-nav.navbar {
min-height: 1px;
}
#floating-nav ul li a {
font-size: 20px;
}
#floating-nav ul li a:hover {
background: none;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css">
<nav class="navbar navbar-floating navbar-default" role="navigation" id="floating-nav" >
<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="#hidden-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 scroll-top" href="#">DSA Media Group</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="hidden-nav">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Agency</li>
<li>Capabilities</li>
<li>Projects</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.js"></script>
What am I doing wrong? Any help is much appreciated.
Just add a navbar-default class to the div wrapping your <ul> element like this:
<div class="collapse navbar-collapse navbar-default" id="hidden-nav">
<ul class="nav navbar-nav">
....
</ul>
</div>
Try using .navbar-dark as
<nav class="navbar navbar-dark navbar-floating navbar-default" role="navigation" id="floating-nav" >
<div class="container">
.........
</div>
</nav>
For me, the solution is really annoying
change navbar-expand-sm to navbar-expand-lg in side <nav class=
It's inside of your bootstrap css. It's defined by default to hidde on md. all you gotta do is creat a new line in your style page..navbar-expand-md .navbar-toggler{display: block !important;}