I have followed a snippet from this question Bootstrap 4 - Navbar items outside the collapse which helped me create a couple of none collapsible items for when the viewport shrinks. However I have a drop down menu inside one of these non collapsible items and when this item is exapnded it expands the whole Navbars and does not pop out ontop of it. you can see it in the sample int the link below
http://codeply.com/go/U0GQYJd2JO
navbar code:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" id="mainNav">
<a class="navbar-brand" href="/">
MY Site
</a>
<div class="d-flex flex-row order-2 order-lg-3">
<ul class="navbar-nav flex-row">
<li style="width:250px;">
<select data-placeholder="Jump to site..." id="quickjump-menu" class="form-control form-control-chosen">
<option value=""></option>
<option value="/sites/site/139/">protein</option>
<option value="/sites/site/138/">shake</option>
<option value="/sites/site/159/">soup</option>
<option value="/sites/site/115/">test 1</option>
<option value="/sites/site/116/">test 2</option>
</select>
</li>
<li class="nav-item dropdown">
<a class="nav-link p-2 dropdown-toggle" data-toggle="dropdown" href="#" role="button"
aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user fa-lg"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-header text-center">
<strong>Admin</strong>
</div>
<a class="dropdown-item" href="/admin/" target='_blank'>
<i class="fa fa-user fa-fw"></i> Admin
</a>
<a class="dropdown-item" href="/user_info/">
<i class="fa fa-users fa-fw"></i> User Info
</a>
<div class="dropdown-header text-center">
<strong>Settings</strong>
</div>
<a class="dropdown-item" href="/app_settings/">
<i class="fa fa-gears fa-fw"></i> App Settings
</a>
<div class="dropdown-header text-center">
<strong>User</strong>
</div>
<a class="dropdown-item" href="/edit_profile/1/">
<i class="fa fa-user fa-fw"></i> User Profile
</a>
<a class="dropdown-item" href="/logout/?next=/login">
<i class="fa fa-gear fa-fw"></i> Log out
</a>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="menu">
<li>...</li>
</ul>
</div>
</nav>
sample image when the the view port shrinks
Just add the position-absolute class to dropdown-menu. No extra CSS is needed.
<div class="dropdown-menu dropdown-menu-right position-absolute">
...
</div>
https://www.codeply.com/go/Q2wqmJnrlB
As you can see on this Bootstrap 4 GitHub issue, the intended behavior of dropdowns inside the "mobile" (once less than the expand-* breakpoint is reach) Navbar is to contain the dropdown inside the Navbar, and not float over it.
To improve the Navbar layout, you may also want to add flex-row flex-nowrap to the navbar-nav so it doesn't stack and make the Navbar too tall.
You can overcome this issue by overriding the responsive position: static set on the dropdown-menu:
css:
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
}
You need to override bootstrap default css. please check below example
#media (max-width: 991px) {
.custom-navbar .navbar-nav .dropdown-menu {
position: absolute;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light custom-navbar" id="mainNav">
<a class="navbar-brand" href="/">
MY Site
</a>
<div class="d-flex flex-row order-2 order-lg-3">
<ul class="navbar-nav flex-row">
<li style="width:250px;">
<select data-placeholder="Jump to site..." id="quickjump-menu" class="form-control form-control-chosen">
<option value=""></option>
<option value="/sites/site/139/">protein</option>
<option value="/sites/site/138/">shake</option>
<option value="/sites/site/159/">soup</option>
<option value="/sites/site/115/">test 1</option>
<option value="/sites/site/116/">test 2</option>
</select>
</li>
<li class="nav-item dropdown">
<a class="nav-link p-2 dropdown-toggle" data-toggle="dropdown" href="#" role="button"
aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user fa-lg"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-header text-center">
<strong>Admin</strong>
</div>
<a class="dropdown-item" href="/admin/" target='_blank'>
<i class="fa fa-user fa-fw"></i> Admin
</a>
<a class="dropdown-item" href="/user_info/">
<i class="fa fa-users fa-fw"></i> User Info
</a>
<div class="dropdown-header text-center">
<strong>Settings</strong>
</div>
<a class="dropdown-item" href="/app_settings/">
<i class="fa fa-gears fa-fw"></i> App Settings
</a>
<div class="dropdown-header text-center">
<strong>User</strong>
</div>
<a class="dropdown-item" href="/edit_profile/1/">
<i class="fa fa-user fa-fw"></i> User Profile
</a>
<a class="dropdown-item" href="/logout/?next=/login">
<i class="fa fa-gear fa-fw"></i> Log out
</a>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="menu">
<li>...</li>
</ul>
</div>
</nav>
</body>
</html>
Related
I'm working with bootstrap 5 and when I try to set border and outline to none on my css file, using the nav-toggler class It won't work.
.menu-bar .navbar-toggler{
padding-right: 20px;
outline: none!important;
border: none!important;
}
It doesn't work on my nav links, I still can see the border.
Here's my html
<div class="header">
<div class="menu-bar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<img src="{% static 'TableauDeBordMjc/images/logo_mjc.png' %}" alt="">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav float-end">
<li class="nav-item">
<a class="nav-link" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nouveau</a>
</li>
<li class="nav-item me-3 me-lg-0 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
Logs
</a>
<ul class="dropdown-menu" >
<li>
<a class="dropdown-item" href="#">Adhérents</a>
</li>
<li>
<a class="dropdown-item" href="#">Salariés</a>
</li>
</ul>
</li>
<li class="nav-item me-3 me-lg-0 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu pull-right" >
<li>
<a class="dropdown-item" href="#">Déconnexion</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
Any ideas why ? Also I have put
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
before closing the body tag.
I put here a img of my web site enter image description here
Thank you
To remove border you can use directly border-0 class to the element.
<button class="border-0 navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
For the outline you can check this solution, but I think that what you need is box-shadow property to edit.
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none;
box-shadow: none;
}
I don't know why this didn's work, but I've downgraded and this work now.
Thank you for your help, all.
I'm trying to extend my navbar data-toggle dropdown to the full width of the screen. For some reason, it still leaves white space on the left side when I set the viewport width to 100. I'm using bootstrap and setting a media query in my CSS which I'll show below.
<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-primary">
<div class="container">
<a class="navbar-brand text-white">Vince Clicks</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler"
aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse bg-primary" id="navbarToggler">
<ul class="navbar-nav text-center mx-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
<div class="d-none d-sm-flex">
<a class="btn btn-social-icon btn-linkedin" href="#"><i
class="fab fa-2x fa-github-square"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i
class="fab fa-2x fa-linkedin"></i></a>
</div>
</div>
</div>
</nav>
#media (max-width: 576px){
.navbar-nav{
margin-top: 11px;
max-height: 158px;
width: 100vw
}
.nav-link{
border-top: 1px solid black;
}
}
The .container has left and right padding (x-axis), remove it by adding .px-0 and your example works. There is no need to set the width in your media query.
In the following snippet, in order to compensate for the lost padding
I have added margins to .navbar-brand and .navbar-toggler
with .ms-3 and .me-3, respectively:
#media (max-width: 576px) {
.navbar-nav {
margin-top: 11px;
max-height: 158px;
}
.nav-link {
border-top: 1px solid black;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-primary">
<div class="container px-0">
<a class="navbar-brand text-white ms-3">Vince Clicks</a>
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse bg-primary" id="navbarToggler">
<ul class="navbar-nav text-center mx-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
<div class="d-none d-sm-flex">
<a class="btn btn-social-icon btn-linkedin" href="#"><i class="fab fa-2x fa-github-square"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fab fa-2x fa-linkedin"></i></a>
</div>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
This is a question similar to this one, but it is for Bootstrap 4.
I am not able to add right-justified entries on the BS4 navbar that stay visible both when collapsed and not collapsed. I spent one full afternoon without success.
This is my goal:
Here my current code (that works only when not collapsed):
<nav class="navbar navbar-light navbar-expand-xl border-bottom mainmenu sticky-top">
<a class="navbar-brand text-capitalize text-blur" href="/">
<img class="mr-1" src="/images/logo/favicon-32x32.png" alt="Logo">
<span class="">Portami in Pista</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myTopMenu"
aria-controls="collapsableTopMen" aria-expanded="false" aria-label="[Menu]">
<span class="sr-only">[Menu]</span>
<span class="navbar-toggler-icon" title="[Menu]"/>
</button>
<div class="collapse navbar-collapse" id="collapsableTopMen">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/Schools/">
<i class="fa fa-motorcycle fa-rotate-315 text-danger" aria-hidden="true"/>
<span class="text-blur-danger">PiP Reparto Corse</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Tracks/">
<i class="fa fa-flag-checkered text-primary" aria-hidden="true"/>
<span>Piste</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Blog/le-guide-del-giovedi/">
<i class="fa fa-mortar-board text-primary" aria-hidden="true"/>
<span>Le guide del giovedì</span>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<!- START of section should be always visible -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLang" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="famfamfam-flags it" title="Italiano"/>
<span class="d-inline d-xl-none">Italiano</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownLang">
<a class="dropdown-item" href="/AbpLocalization/ChangeCulture?cultureName=en&returnUrl=/">
<i class="famfamfam-flags gb" aria-hidden="true"/>
<span class="">English</span>
</a>
</div>
</li>
<!- END of section should be always visible -->
<li class="nav-item">
<a class="nav-link" href="/Account/Login"><i class="fa fa-sign-in"/> Log in</a>
</li>
</ul>
</div>
</nav>
Since you're using Bootstrap 4, this answer is more relevant to your question:
https://stackoverflow.com/a/41513784/171456 (see the last part)
The part that you always want to keep visible needs to be separate from any of the collapsible parts. Then use the order-* classes to position the items as desired:
Demo: https://codeply.com/p/ylDhhZtpiH
<nav class="navbar navbar-light navbar-expand-xl border-bottom mainmenu sticky-top justify-content-start">
<a class="navbar-brand text-capitalize text-blur" href="/">
<img class="mr-1" src="//placehold.it/32" alt="Logo">
<span class="">Portami in Pista</span>
</a>
<button class="navbar-toggler order-2 ml-1" type="button" data-toggle="collapse" data-target=".collapsable" aria-controls="collapsableTopMen" aria-expanded="false" aria-label="[Menu]">
<span class="sr-only">[Menu]</span>
<span class="navbar-toggler-icon" title="[Menu]"></span>
</button>
<!-- 1st collapse menu -->
<div class="collapse navbar-collapse collapsable flex-grow-0 flex-xl-grow-1 order-last" id="collapsableTopMen">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/Schools/">
<i class="fa fa-motorcycle fa-rotate-315 text-danger" aria-hidden="true"></i>
<span class="text-blur-danger">PiP Reparto Corse</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Tracks/">
<i class="fa fa-flag-checkered text-primary" aria-hidden="true"></i>
<span>Piste</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Blog/le-guide-del-giovedi/">
<i class="fa fa-mortar-board text-primary" aria-hidden="true"></i>
<span>Le guide del giovedì</span>
</a>
</li>
</ul>
</div>
<!-- always visible portion -->
<ul class="navbar-nav order-1 order-xl-last ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLang" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-flag it" title="Italiano"></i>
<span class="d-inline d-xl-none">Italiano</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownLang">
<a class="dropdown-item" href="#">
<i class="fas fa-flag-usa gb" aria-hidden="true"></i>
<span class="">English</span>
</a>
</div>
</li>
</ul>
<!-- 2nd collapse menu -->
<div class="collapse navbar-collapse collapsable flex-grow-0 order-last">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/Account/Login"><i class="fa fa-sign-in"></i> Log in</a>
</li>
</ul>
</div>
</nav>
https://codeply.com/p/ylDhhZtpiH
I did a small important fix to the good answer from Zim.
I fixed the "always visible" portion of the menu as he did not overlap the whole menu when it was collapsed.
Adding a custom .navbar-always-overlapped class, fixed it.
<nav class="navbar navbar-light navbar-expand-lg border-bottom mainmenu sticky-top justify-content-start">
<!-- same code from Zim here>
...
<!-- always visible portion. Note the 'navbar-always-overlapped' -->
<ul class="navbar-nav navbar-always-overlapped order-1 order-lg-last ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLang" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-flag it" title="Italiano"></i>
<span class="d-inline d-lg-none">Italiano</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownLang">
<a class="dropdown-item" href="#">
<i class="fas fa-flag-usa gb" aria-hidden="true"></i>
<span class="">English</span>
</a>
</div>
</li>
</ul>
<!-- 2nd collapse menu -->
<div class="collapse navbar-collapse collapsable flex-grow-0 order-last">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/Account/Login"><i class="fa fa-sign-in"></i> Log in</a>
</li>
</ul>
</div>
</nav>
and the code for .navbar-always-overlapped:
.navbar-always-overlapped .dropdown-menu {
position: absolute !important;
}
See https://codeply.com/p/9deLYTGblZ
I can get the navbar to be visible, but the drop down menu in the navbar does not work -- when I click on the drop down menu it does not display the menu.
I got the source code from another Bootstrap website. But it is not working properly in my project.
HTML:
<nav class="mb-1 navbar navbar-expand-lg navbar-dark info-color" style="background-color: #293631; height: 2cm">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-4">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="https://www.facebook.com/madhusanka.edirimanna">
<i class="fab fa-facebook-f"></i> Facebook
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-instagram"></i> Instagram</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user" ></i> Profile </a>
<div class="dropdown-menu dropdown-menu-right dropdown-info" aria-labelledby="navbarDropdownMenuLink-4">
<a class="dropdown-item" href="#">My account</a>
<a class="dropdown-item" routerLink="/home">Log out</a>
</div>
</li>
</ul>
</div>
</nav>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="https://www.facebook.com/madhusanka.edirimanna">
<i class="fab fa-facebook-f"></i> Facebook
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-instagram"></i> Instagram</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user" ></i> Profile </a>
<div class="dropdown-menu dropdown-menu-right dropdown-info" aria-labelledby="navbarDropdownMenuLink-4">
<a class="dropdown-item" href="#">My account</a>
<a class="dropdown-item" routerLink="/home">Log out</a>
</div>
</li>
</ul>
</div>
</nav>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
First check if you have used the links properly. A suggestion to you is using jQuery.min CDN not the slim version that is provided on Bootstrap. I have faced lots of problems for that. Also to keep the button right aligned I gave .ml-auto on the button. If you want it to be left aligned simply remove the class. Hope it'll help
i am creating a navbar in bootstrap and the issue is that when i resize my browser it shows navigation toggle button and if the page is inspected in chrome or opera navigation toggle button is not shown and full menu is displayed.
i uploaded the site on a domain and looked it from a phone but there was no toggle button and simply complete nav menu.
my issue's screenshots link is http://zian.tk/pictures/Capture01.jpg
HTML for the code is:
<nav class="nav navbar navbar-expand-md bg-dark navbar-dark">
<div class="row w-100">
<div class="col-lg-2">
<h1`enter code here` class="text-white text-center">
LOGO
</h1>
</div>
<button class="navbar-toggler w-100" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-lg-8">
<div class="collapse navbar-collapse text-center mx-auto justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav text-centre mt-2" >
<li class="nav-item dropdown pr-4">
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
home
</li>
<li class="nav-item pr-4">
about
</li>
<li class="nav-item pr-4">
blog
</li>
<li class="nav-item pr-4">
Insights
</li>
<li class="nav-item pr-4">
contact
</li>
<li class="nav-item">
Services
</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-12 pt-3 float-right justify-content-end ">
<div class="text-center">
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook pr-2 mb-0"></i>
<i class="fab fa-instagram pr-2 mb-0"></i>
<i class="fab fa-behance pr-2 mb-0"></i>
<i class="fab fa-google pr-2 mb-0"></i>
<i class="fab fa-pinterest"></i>
</div>
</div>
</div>
</nav>