Is navs not navbar
https://getbootstrap.com/docs/4.1/components/navs/#vertical
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-angle-right fa-fw"></i>
Link A
<span class="badge badge-warning badge-pill">140</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-angle-right fa-fw"></i>
Link B
<span class="badge badge-warning badge-pill">300</span>
</a>
</li>
</ul>
tired change
<span class="badge badge-warning badge-pill">
to
<span class="badge badge-warning badge-pill ml-auto">
but didn't work
Edited: see #Temani Afif answer below
if with d-flex only
with d-flex align-items-center solved the problem
You need to make the a element a flex container to be able to use ml-auto/mr-auto. Simply add d-flex to a:
I also added align-items-center to center but it's not mandatory:
.nav {
background:pink;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i class="fas fa-angle-right fa-fw"></i>
Link A
<span class="badge badge-warning badge-pill ml-auto">140</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i class="fas fa-angle-right fa-fw"></i>
Link B
<span class="badge badge-warning badge-pill ml-auto">300</span>
</a>
</li>
</ul>
Related
This is a weird frustrating issue, as I'm working on converting code from Bootstrap 3 to 4. Navbar with a button group on the right (user name, login options, etc.)
When the button group is not a part of the navbar (not included in the menu -- I have PHP code that is not shown below that checks for a specific page if the menu (navbar) is to be displayed or not, the dropdown list appears correct -- vertical, etc. If, however, I place the button group in the navbar, the dropdown list goes horizontal.
I am sure this is because some of the code is somehow interfering with other parts, but I cannot figure it out. Stripping out the PHP code, and just showing the HTML for Bootstrap 4, this is what I have -- first with button group without the navbar:
<nav class="nav navbar-light bg-light navbar-right" style="margin-top: 3px !important;">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">hirsch</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
</div> <!-- / dropdown-menu -->
</div> <!-- / btn-group -->
</nav> <!-- / navbar-right -->
That code displays as expected. If, however, I insert this before the end of the collapse part of the navbar (or if I put it after, it doesn't seem to matter), it displays horizontally instead, which is ... weird:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="">Who's Who</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Disclaimer/Copyright</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
</ul> <!-- / navbar-nav -->
<nav class="nav navbar-light bg-light navbar-right" style="margin-top: 3px !important;">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">UserName</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
</div> <!-- / dropdown-menu -->
</div> <!-- / btn-group -->
</nav> <!-- / navbar-right -->
</div> <!-- / collapse -->
</nav>
You should be able to copy and paste the code samples and see them if you have the rest of Bootstrap 4 set up. Click the down-caret symbol on the button group, in the first example it is vertical, in the second it is horizontal, but it's the exact same code. I am really confused where the issue is, I've been staring at this for quite some time and cannot find the problem.
Turns out that the Dropdown has changed a bit, and rather than using a UL tag and such:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
It works better (and simpler) with:
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<a class="dropdown-item" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
<a class="dropdown-item" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
<a class="dropdown-item" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</div>
I have created a navbar with Bootstrap 4 alpha 6 that has a large brand/icon on the left, and 2 navbar-nav's with links to the right of the icon. One nav has links, and the other nav has icons. It's working exactly as I want except for one thing.
I'd like the 2 navbars to appear in 2 separate rows to the right of the icon. Like this:
------------------------------------------------------
link link link link
brand-icon -------------------------------------------
icon icon icon
------------------------------------------------------
The mobile version will still show the links vertically as it does now. I've tried several different things with flexbox, but can't get it to work.
Here is my code:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="py-2 ml-lg-2 mx-3"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></h1>
<div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</nav>
You can use the flex-column flexbox utility class to stack the 2 navs vertically next to the icon. This sets flex-direction: column on the navbar-collapse div so that it's child elements stack vertically.
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="py-2 ml-lg-2 mx-3"><i class="fa fa-envelope-o fa-lg mt-2" aria-hidden="true"></i></h1>
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<ul class="navbar-nav flex-row mb-2">
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</nav>
Demo - Bootstrap 4 navbar with 2 rows
Here's another variation with the 2 rows and right align search form:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand my-auto" href="#">Brand</a>
<div class="collapse navbar-collapse flex-md-column" id="navbarCollapse">
<ul class="navbar-nav ml-auto small">
<li class="nav-item active">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<form class="form-inline ml-auto">
...
</form>
</div>
</nav>
Demo - Navbar with 2 rows on right
Update for Bootstrap 4.0.0:
https://www.codeply.com/go/05hEHoiUvv
Here is an alternate scenario with 2 navbars with one mobile toggler
Bootstrap 4.0 - Two NavBars that collapse into one toggle
How can I have Brand and Navbar on separate lines?
How move 'nav' element under 'navbar-brand' in my Navbar
How to place navbar below sticky navbar using bootstrap 4?
Bootstrap 4 Multiple fixed-top navbars
The "variation with the 2 row aligned right" did not right-align the rows in Safari for me. I put the unordered lists in a new div with the flex-column and ml-auto classes.
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button>
<h1 class="py-2 ml-lg-2 mx-3"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></h1>
<div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
<div class="flex-column ml-auto">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Product</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Shop</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Events</a> </li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a> </li>
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a> </li>
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a> </li>
</ul>
</div>
</div>
</div>
</nav>
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand col-lg-1" href="#">
<img src="../assets/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
SMS-WEB
</a>
<!--me-auto mb-2 mb-lg-0 -->
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3 col-lg-11" id="navbarSupportedContent">
<ul class="navbar-nav col-lg-12 " >
<li class="nav-item col-lg-8">
<app-searchbox class=""></app-searchbox>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button></li>
<li class="nav-item " style="display:inline-flex;">
<span style="font-size: 2em; color: Tomato;" class="pr-2 text-wrap">
<fa icon="user" class=""/></span>
<div style="display:block">
<div class="row-1 " style="font-size:13px">
<a class="nav-link active p-0" href="#">Hello, Sign in</a>
</div>
<div class="row-2" style="font-size:15px"><span>My Account</span></div>
</div>
</li>
<li class="nav-item ">
<span style="font-size: 2em; color: Tomato;" class="pr-2 pl-3 text-wrap">
<fa icon="heart" class=""/></span>
</li>
<li class="nav-item " style="display:inline-flex;" id="nav-cart" >
<span style="font-size: 2em; color: Tomato;" class="pl-2 pr-2 text-wrap rounded-circle" >
<fa :icon="['fas', 'cart-plus']"></fa></span>
<div style="display:block">
<div class="row-1" style="font-size:13px">
<a class="nav-link active p-0" href="#">My cart</a>
</div>
<div class="row-2" style="font-size:15px" ><span>Rs: 2500/=</span>
</div>
</div>
<app-dropcart id="drop-cart"/>
</li>
</ul>
<ul class="navbar-nav flex-row mb-2 col-lg-12" >
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
import searchbox from '#/components/search.vue'
import dropCart from '#/components/drop-cart.vue'
export default {
name: 'navbar',
props: {
msg: String
},
components: {
'app-searchbox':searchbox,
'app-dropcart':dropCart
}
}
</script>
<style lang="sass">
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand col-lg-1" href="#">
<img src="../assets/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
SMS-WEB
</a>
<!--me-auto mb-2 mb-lg-0 -->
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3 col-lg-11" id="navbarSupportedContent">
<ul class="navbar-nav col-lg-12 " >
<li class="nav-item col-lg-8">
<div class="container ">
<form class="d-flex">
<input class="form-control rounded-0 ml-5" type="search" placeholder="Search product here..." aria-label="Search">
<button class="btn btn-outline-success rounded-0" type="submit">Search</button>
</form>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button></li>
<li class="nav-item " style="display:inline-flex;">
<span style="font-size: 2em; color: Tomato;" class="pr-2 text-wrap">
<i class="fas fa-cart-plus"></i></span>
<div style="display:block">
<div class="row-1 " style="font-size:13px">
<a class="nav-link active p-0" href="#">Hello, Sign in</a>
</div>
<div class="row-2" style="font-size:15px"><span>My Account</span></div>
</div>
</li>
<li class="nav-item ">
<span style="font-size: 2em; color: Tomato;" class="pr-2 pl-3 text-wrap">
<i class="fas fa-cart-plus"></i></span>
</li>
<li class="nav-item " style="display:inline-flex;" id="nav-cart" >
<span style="font-size: 2em; color: Tomato;" class="pl-2 pr-2 text-wrap rounded-circle" >
<fa :icon="['fas', 'cart-plus']"></fa></span>
<div style="display:block">
<div class="row-1" style="font-size:13px">
<a class="nav-link active p-0" href="#">My cart</a>
</div>
<div class="row-2" style="font-size:15px" ><span>Rs: 2500/=</span>
</div>
</div>
<app-dropcart id="drop-cart"/>
</li>
</ul>
<ul class="navbar-nav flex-row mb-2 col-lg-12" >
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- help http://wa.me/+94711308100 -->
I have hideable sidebar with nav menu. Everything's use flexbox and everything's alright except expandable menu (second from above). Menu crop in the beginning in Firefox and crossing with social icons in Chromium? How to fix this? I use PostCSS's cssnext and cssfixes.
Full code: https://codepen.io/arch2/pen/dNgKxq
<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox" />
<div class="sidebar" id="sidebar">
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation_item">ГЛАВНАЯ</li>
<li class="navigation_item dropdown__toggle">ТЕКСТЫ
<ul class="navigation__list dropdown">
<li class="navigation_item">***</li>
<li class="navigation_item">САГА О РОНИНЕ</li>
<li class="navigation_item">МАЛО</li>
<li class="navigation_item">КЛЮВИКИ НОТ</li>
<li class="navigation_item">В КЛЮВИКАХ</li>
<li class="navigation_item">КРАСНАЯ ПЕСНЯ</li>
<li class="navigation_item">ЛЕС</li>
<li class="navigation_item">ЧЕРНОКНИЖНИЦА</li>
<li class="navigation_item">ТЕРЕМ</li>
<li class="navigation_item">ГЕРБАРИЙ</li>
<li class="navigation_item">ВНУТРИ ГЕРБАРИЯ</li>
<li class="navigation_item">ТЕПЛО БЕЗДОННОЕ</li>
<li class="navigation_item">МАЛЬЧИК-БАТИСКАФ</li>
<li class="navigation_item">ИГРУШКИ</li>
</ul>
</li>
<li class="navigation_item">О ГРУППЕ</li>
</ul>
</nav>
<address class="soc-link">
<a class="soc-link__item" href="https://vk.com/caddysmelledliketrees" title="https://vk.com/caddysmelledliketrees">
<i class="fa fa-vk" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="https://youtube.com/channel/UCDUU-xPtMQ2VOpYaMv-OvLw" title="https://youtube.com/channel/UCDUU-xPtMQ2VOpYaMv-OvLw">
<i class="fa fa-youtube" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="https://instagram.com/caddysmellslike" title="https://instagram.com/caddysmellslike">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="http://last.fm/ru/music/%D0%9A%D1%8D%D0%B4%D0%B4%D0%B8+%D0%BF%D0%B0%D1%85%D0%BD%D0%B5%D1%82+%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D1%8C%D1%8F%D0%BC%D0%B8" title="http://last.fm/ru/music/%D0%9A%D1%8D%D0%B4%D0%B4%D0%B8+%D0%BF%D0%B0%D1%85%D0%BD%D0%B5%D1%82+%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D1%8C%D1%8F%D0%BC%D0%B8">
<i class="fa fa-lastfm" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="https://soundcloud.com/caddysmelledliketrees" title="https://soundcloud.com/caddysmelledliketrees">
<i class="fa fa-soundcloud" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="https://caddysmelledliketrees.bandcamp.com" title="https://caddysmelledliketrees.bandcamp.com">
<i class="fa fa-bandcamp" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="mailto:info#caddysmellsliketrees.ru?subject=Общие%20вопросы"><i class="fa fa-envelope" aria-hidden="true"></i></a>
</address>
</div>
.navigation and .soc-link should not be display: flex; you want these two to be normal block elements. The flex is causing them to overlap because they aren't respecting their children's sizes.
When the items are toggled to collapse they collapse side by side in the col-sm-2 class. Click the "Challenge Management" to see what It's doing.
I want "Challenge Management" to either take up 100% of the container or always have it stack properly.
Any thoughts? I'm missing something simple.
https://jsfiddle.net/egfs8t61/
<div class="col-sm-2" style="position:fixed;right: 0;left: 0;z-index: 1030; max-height:100%; overflow-y:auto; margin-top:-67px;padding-top:67px;">
<a href="#" data-toggle="collapse" aria-expanded="false" data-target="#menu_ChallengeManagement" class="collapsed">
<strong> Challenge Management </strong>
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
<ul class="nav nav-stacked ui-sortable collapse" id="menu_ChallengeManagement" aria-expanded="false" style="height: 0px;">
<li class="ui-sortable-handle" id="li_86">
<a href="#" onclick="changeIframe('/challenge/entry', '')">
<i class="glyphicon "></i> New Entry
</a>
</li>
<li class="ui-sortable-handle" id="li_87">
<a href="#" onclick="changeIframe('/challenge/list', '')">
<i class="glyphicon "></i> My Tasks <span class="badge badge-info MyTaskscount"></span>
</a>
</li>
<li class="ui-sortable-handle" id="li_88">
<a href="#" onclick="changeIframe('/challenge/history', '')">
<i class="glyphicon "></i> My Entries
</a>
</li>
</ul>
<a href="#" data-toggle="collapse" aria-expanded="true" data-target="#menu_Fabrication" class="">
<strong> Fabrication </strong>
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
<ul class="nav nav-stacked ui-sortable collapse in" id="menu_Fabrication" aria-expanded="true">
<li class="ui-sortable-handle" id="li_79">
<a href="#" onclick="changeIframe('/fms/index', '')">
<i class="glyphicon "></i> Fab Management (FMS)
</a>
</li>
<li class="ui-sortable-handle" id="li_80">
<a href="#" onclick="changeIframe('/que/departmentstatus', 'Org=&Page=1')">
<i class="glyphicon "></i> Department Status
</a>
</li>
<li class="ui-sortable-handle" id="li_85">
<a href="#" onclick="changeIframe('/schedule/taktmgr', '')">
<i class="glyphicon "></i> Takt Manager
</a>
</li>
</ul>
</div>
I did not understand your question completely. But is this what you looking for?
Fiddle here
<div class="col-sm-2" style="position:fixed;right: 0;left: 0;z-index: 1030; max-height:100%; overflow-y:auto; margin-top:-67px;padding-top:67px;">
<a href="#" data-toggle="collapse" aria-expanded="false" data-target="#menu_ChallengeManagement" class="collapsed">
<strong> Challenge Management </strong>
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
<ul class="nav nav-stacked ui-sortable collapse" id="menu_ChallengeManagement" aria-expanded="false" style="height: 0px;">
<li class="ui-sortable-handle" id="li_86">
<a href="#" onclick="changeIframe('/challenge/entry', '')">
<i class="glyphicon "></i> New Entry
</a>
</li>
<li class="ui-sortable-handle" id="li_87">
<a href="#" onclick="changeIframe('/challenge/list', '')">
<i class="glyphicon "></i> My Tasks <span class="badge badge-info MyTaskscount"></span>
</a>
</li>
<li class="ui-sortable-handle" id="li_88">
<a href="#" onclick="changeIframe('/challenge/history', '')">
<i class="glyphicon "></i> My Entries
</a>
</li>
</ul>
<br>
<a href="#" data-toggle="collapse" aria-expanded="false" data-target="#menu_Fabrication" class="collapsed">
<strong> Fabrication </strong>
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
<ul class="nav nav-stacked ui-sortable collapse" id="menu_Fabrication" aria-expanded="true">
<li class="ui-sortable-handle" id="li_86">
<a href="#" onclick="changeIframe('/fms/index', '')">
<i class="glyphicon "></i> Fab Management (FMS)
</a>
</li>
<li class="ui-sortable-handle" id="li_87">
<a href="#" onclick="changeIframe('/que/departmentstatus', 'Org=&Page=1')">
<i class="glyphicon "></i> Department Status
</a>
</li>
<li class="ui-sortable-handle" id="li_88">
<a href="#" onclick="changeIframe('/schedule/taktmgr', '')">
<i class="glyphicon "></i> Takt Manager
</a>
</li>
</ul>
</div>
Above is a screenshot taken with the responsive design feature built into Safari on OS X. Below, is the code used to produce the navbar, as you can see, the dropdown menu on the right continues off the page. How can I prevent this?
<div class="container">
<nav class="navbar navbar-fixed-top navbar-light bg-faded" style="background-color: #ecf0f1">
<a class="hidden-xs-down navbar-brand" href="/">
Brand
</a>
<ul class="nav navbar-nav">
<li class="nav-item hidden-sm-up">
<a class="nav-link" href="#">
<i class="fa fa-home"></i>
</a>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="dropdown-toggle nav-link"
id="user-menu"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
href="#"
>
<i class="fa fa-briefcase"></i>
<span class="hidden-xs-down"> Work</span>
</a>
<div class="dropdown-menu"
aria-labelledby="user-menu"
>
<a class="dropdown-item"
href="#"
>
<i class="fa fa-fw fa-wrench"></i> Services
</a>
</div>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="dropdown-toggle nav-link"
id="user-menu"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
href="#"
>
<i class="fa fa-users"></i>
<span class="hidden-xs-down"> Team</span>
</a>
<div class="dropdown-menu"
aria-labelledby="user-menu"
>
<a class="dropdown-item"
href="#"
>
<i class="fa fa-fw fa-user"></i> People
</a>
</div>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="dropdown-toggle nav-link"
id="user-menu"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
href="#"
>
<i class="fa fa-building-o"></i>
<span class="hidden-xs-down"> Company</span>
</a>
<div class="dropdown-menu"
aria-labelledby="user-menu"
>
<a class="dropdown-item"
href="#"
>
<i class="fa fa-fw fa-newspaper-o"></i> News
</a>
</div>
</div>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<div class="dropdown">
<a class="dropdown-toggle nav-link"
id="user-menu"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
href="#"
>
<i class="fa fa-user"></i>
<span class="hidden-xs-down"> Username</span>
</a>
<div class="dropdown-menu"
aria-labelledby="user-menu"
>
<a class="dropdown-item"
href="#"
>
<i class="fa fa-fw fa-inbox"></i> Inbox
</a>
<div class="dropdown-divider"></div>
<div class="dropdown-header">Events</div>
<a class="dropdown-item"
href="#"
>
<i class="fa fa-fw fa-calendar"></i> All Events
</a>
<a class="dropdown-item"
href="#"
>
</div>
</div>
</li>
</ul>
</nav>
</div>
I just had to add the class dropdown-menu-right to the dropdown-menu element.
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<div class="dropdown">
<a class="dropdown-toggle nav-link"
id="user-menu"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
href="#"
>
<i class="fa fa-user"></i>
<span class="hidden-xs-down"> Username</span>
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="user-menu"
>
<a class="dropdown-item"
href="#"
>
You should add extra .dropdown-menu-right class to your .dropdown-menu element.
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="user-menu">
<a class="dropdown-item"
href="#">
<i class="fa fa-fw fa-wrench"></i> Services
</a>
</div>
JSfiddle here