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>
Related
im new to laravel and in my class project i want to take SB Admin2 template and use it on laravel, since i want to learn how is this made, i took the HTML version and made into sidebar, topbar and content components, rigth now im struggling with the side bar i made it dynamic so i can evaluate the role of the user and render the menus according to it, the sample nav-items work fine but my generated code doesn't, i can't see any diference, can someone give me an advice?
SIDEBAR GENERATED CODE
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center">
<div class="sidebar-brand-icon rotate-n-15">
<img src="http://127.0.0.1:8000/layout/img/rapidsoft_icon.png">
</div>
<div class="sidebar-brand-text mx-3">Rapisoft</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a class="nav-link" href="http://127.0.0.1:8000/dashboard">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<li class="nav-item">
<a class="nav-link" href="/home">
<i class="fas fa-fw fa-chart-area"></i>
<span>Home</span></a>
</li>
<!--GENERATED CODE-->
<li class="nav-item">
<a class="nav-link collapsed" href="/pages" data-toggle="collapse" data-target="#2collapsePages"
aria-expanded="true" aria-controls="2collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Pages</span>
</a>
<div id="2collapsePages" class="collapse" aria-labelledby="headingPages"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="/portfolio">Portfolio</a>
<a class="collapse-item" href="/gallery">Gallery</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/our-services">
<i class="fas fa-fw fa-chart-area"></i>
<span>Our Services</span></a>
</li>
<!--GENERATED CODE-->
<li class="nav-item">
<a class="nav-link collapsed" href="/about" data-toggle="collapse" data-target="#4collapsePages"
aria-expanded="true" aria-controls="4collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>About</span>
</a>
<div id="4collapsePages" class="collapse" aria-labelledby="headingPages"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="/about-team">About Team</a>
<a class="collapse-item" href="/about-clients">About Clients</a>
</div>
</div>
</li>
<!--GENERATED CODE-->
<li class="nav-item">
<a class="nav-link collapsed" href="/contact" data-toggle="collapse" data-target="#9collapsePages"
aria-expanded="true" aria-controls="9collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Contact</span>
</a>
<div id="9collapsePages" class="collapse" aria-labelledby="headingPages"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="/contact-team">Contact Team</a>
<a class="collapse-item" href="/contact-clients">Contact Clients</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/pqr">
<i class="fas fa-fw fa-chart-area"></i>
<span>PQR</span></a>
</li>
<!--SAMPLE FROM SB ADMIN-->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages"
aria-expanded="true" aria-controls="collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Paginas</span>
</a>
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Login Screens:</h6>
<a class="collapse-item" href="login.html">Login</a>
<a class="collapse-item" href="register.html">Register</a>
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
<div class="collapse-divider"></div>
<h6 class="collapse-header">Other Pages:</h6>
<a class="collapse-item" href="404.html">404 Page</a>
<a class="collapse-item" href="blank.html">Blank Page</a>
</div>
</div>
</li>
<!-- PARTE ESTATICA ABAJO -->
<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
<!-- Sidebar Message -->
<div class="sidebar-card d-none d-lg-flex">
<img class="sidebar-card-illustration mb-2" src="http://127.0.0.1:8000/layout/img/undraw_rocket.svg"
alt="...">
<p class="text-center mb-2"> Aca van las notas que se deban tener para cada cliente!!!</p>
</div>
</ul>```
I found the problem, this is the code i was using to generate the menu:
#if ($menu->parent_id === 0 && $menu->ChCount() === 0)
<li class="nav-item">
<a class="nav-link" href="/{{$menu->slug}}">
<i class="fas fa-fw fa-chart-area"></i>
<span>{{$menu->menu_title}}</span></a>
</li>
#else
#if ($menu->parent_id === 0 and $menu->ChCount() > 0)
<li class="nav-item">
<a class="nav-link collapsed" href="/{{$menu->slug}}" data-toggle="collapse" data-target="#{{$menu->id}}collapsePages"
aria-expanded="true" aria-controls="{{$menu->id}}collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>{{$menu->menu_title}}</span>
</a>
<div id="{{$menu->id}}collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header"></h6>
#foreach($menu->children as $menu)
<a class="collapse-item" href="/{{$menu->slug}}">{{$menu->menu_title}}</a>
#endforeach
</div>
</div>
</li>
#endif
#endif
i found that the ID wasn't captured so it doesnt aplied any css to it, i changed this:
id="{{$menu->id}}collapsePages" for this id="collapse_id{{$menu->id}}" and problem solved.
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 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>
I have a code: Codepen.io.
<div class="container-fluid h-100">
<div class="row wrapper h-100">
<aside class="col-12 col-sm-3 p-0 bg-dark">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark align-items-start flex-sm-column flex-row">
<a class="navbar-brand" href="#"><i class="fa fa-bullseye fa-fw"></i> Brand</a>
<a href class="navbar-toggler" data-toggle="collapse" data-target=".sidebar">
<span class="navbar-toggler-icon"></span>
</a>
<div class="collapse navbar-collapse sidebar">
<ul class="flex-column navbar-nav w-100 justify-content-between">
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span class="">Link</span></a>
</li>
<li class="nav-item">
<a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1" data-parent="#navbar1" data-toggle="collapse" data-target="#m1" aria-expanded="false">
<i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span>
</a>
<div class="collapse" id="m1">
<ul class="flex-column nav">
<a class="nav-link px-0 text-truncate" href="#">Sub</a>
<a class="nav-link px-0 text-truncate" href="#">Sub longer</a>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span class="">Link</span></a>
</li>
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span class="">Link</span></a>
</li>
</ul>
</div>
</nav>
</aside>
<main class="col bg-faded py-3">
</main></div></div>
But I need to set fixed width left sidebar for all resolutions, except in mobile view I need to see like now (top menu with hamburger).
What I need to do?
Use a media query for Bootstrap's sm breakpoint and set min/max width in the "sidebar"...
#media (min-width: 768px) {
aside.col-sm-3 {
min-width: 200px;
max-width: 200px;
}
}
https://www.codeply.com/go/LsMGLozRq0
Also see: Bootstrap 4: responsive sidebar menu to top navbar
This question already has answers here:
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Center an element in Bootstrap Navbar
(10 answers)
Closed 4 years ago.
I need to achieve the brand logo in left, menu items to be center and couple of buttons in the right. I have tried using the flexbox approach but the center items does not align well. and also the brand logo has a wide space with a clickable link.
JS Fiddle
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center">
<div class="container">
<img src="assets/logo/" alt="logo">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100 ml-auto" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">How it works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Become a tutor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item">
<a class="btn btn-link" href="#">Sign In</a>
</li>
<li class="nav-item">
<a class="btn btn-primary" href="#">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
Answering my own question few months later.
<nav class="navbar navbar-light navbar-expand-md bg-white justify-content-center main--navigation dark-header">
<a href="#" class="navbar-brand d-flex w-50 mr-auto">
<img src="assets/images/logo-header.svg" class="navigation__logo" alt="Logo" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">Browse</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How it works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Become a tutor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prices</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item dropdown no-arrow mx-1 nav-link px-0">
<button id="bookmarksDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-outline-secondary btn-outlined" data-original-title="Bookmarks"><img src="assets/icons/bookmark-header-dark.svg"></button>
<div class="dropdown-list dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown">
<h6 class="dropdown-header">
Bookmarks
</h6>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1 nav-link px-0">
<button id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-outline-secondary btn-outlined" data-original-title="Notifications"><img src="assets/icons/bell-header-dark.svg"></button>
<div class="dropdown-list dropdown-menu dropdown-menu-right" aria-labelledby="notificationsDropdown">
<h6 class="dropdown-header">
You do not have any notifications yet
</h6>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1 ml-3 mr-0 nav-link px-0">
<a class="nav-link dropdown-toggle pr-0" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="header__profile__title d-inline-block text-right align-middle">
<span class="mr-2 d-none d-block header__profile__name">Aaron Alexander</span>
<span class="mr-2 d-none d-block header__profile__role">Student</span>
</div>
<div class="header__profile d-inline-block">
<img class="img-profile rounded" src="assets/images/andrew-franklin.jpeg" alt="Aaron Alexander">
</div>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<i class="fas fa-user fa-sm fa-fw mr-2"></i>
Profile
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2"></i>
Settings
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2"></i>
Activity Log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</div>
</nav>
That container div you added after the nav makes you loose the flexbox attributes.
You also set the logo with the class "w-100" which takes all possible width.
I removed those and got a nicely aligned navbar.
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center align-items-center">
<img src="assets/logo/" alt="logo">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100 ml-auto" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">How it works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Become a tutor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item">
<a class="btn btn-link" href="#">Sign In</a>
</li>
<li class="nav-item">
<a class="btn btn-primary" href="#">Sign Up</a>
</li>
</ul>
</div>
</nav>
Here's a fiddle with the results.
here is my working example.
You just need to put all content into single div in order to Justify content with bootstrap classes. Also, I am using navbar-brand and making them show hide depending on screen resolution. You can do that with js which might be smoother once the page loads completely.
#media only screen and (max-width: 991px) {
.logo {
display: flex;
}
.collapse .navbar-brand {
display: none
}
}
#media only screen and (min-width: 992px) {
.logo {
display: none;
}
.collapse .navbar-brand {
display: none;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light d-flex ">
<a class="navbar-brand logo" href="#">Navbar</a>
<button class="navbar-toggler" 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 justify-content-between" id="navbarSupportedContent">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<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>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>