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>
Related
I have this navbar:
Where the army of shopping carts should not be collapsed if the screen is made smaller:
So far, so good...
However, when I click the toggle button, my army of shopping carts is also moved down with the menu, like this:
But I want my army of shopping carts, to stay up as well, like in this image (painted for now):
I've looked for a few hours now, and still can't achieve this behaviour. Here is the fiddle.
Code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">English Park Cuisine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Acasa<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Meniu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="meniu.php">Pizza</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Supe</a>
<a class="dropdown-item" href="#">Ciorbe</a>
<a class="dropdown-item" href="#">Desert</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<p class="dropdown-item">0746117702</p>
<p class="dropdown-item">0742112452</p>
<p class="dropdown-item">0735212352</p>
</div>
</li>
</ul>
</div>
<div class="d-flex order-lg-1 ml-auto pr-2">
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
</div>
</nav>
The question is very similar to this one, however, you don't see this behaviour there because the order of the navbar is different, which is what makes this question unique.
You can approach this using order-* classes. Just keep the order value of the items you want to keep on the top navbar lower than the value of the button that toggle the collapsed mode. In the next example:
(1) When navbar is not collapsed (lg screens) the army of shopping carts will have order-4 and go last.
(2) When navbar is collapsed, the army of shopping carts will have order-1 and the toggle collapsing button will have order-2. So the collapse button will not affect it.
<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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand order-0" href="#">English Park Cuisine</a>
<div class="order-lg-4 order-1 ml-auto mr-2">
<a href="#" class="navbar-text">
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
</a>
<a href="#" class="navbar-text">
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
</a>
<a href="#" class="navbar-text">
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
</a>
</div>
<button class="navbar-toggler order-2" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse order-3" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">
Acasa<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Meniu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="meniu.php">Pizza</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Supe</a>
<a class="dropdown-item" href="#">Ciorbe</a>
<a class="dropdown-item" href="#">Desert</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<p class="dropdown-item">0746117702</p>
<p class="dropdown-item">0742112452</p>
<p class="dropdown-item">0735212352</p>
</div>
</li>
</ul>
</div>
</nav>
try this:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">English Park Cuisine</a>
<div class="d-flex order-lg-1 ml-auto pr-2" style="margin-right:20px;">
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Acasa<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Meniu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="meniu.php">Pizza</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Supe</a>
<a class="dropdown-item" href="#">Ciorbe</a>
<a class="dropdown-item" href="#">Desert</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<p class="dropdown-item">0746117702</p>
<p class="dropdown-item">0742112452</p>
<p class="dropdown-item">0735212352</p>
</div>
</li>
</ul>
</div>
</nav>
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>
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
I just created a vertical bootstrap navigation bar and it looking like this:
Now my problem is when I test the app on a phone, instead of collapsing, it just disappear and the 3 lines does not appear.
Here is the code:
<div class="navbar-collapse collapse">
<ul class="sidebar-menu">
<li class="header">MAIN MENU</li>
<li class="treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span class="glyphicon glyphicon-home"> Home</span> <i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i><span class="glyphicon glyphicon-folder-open"> Patients</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i>
<span class="glyphicon glyphicon-calendar"> Appointments</span>
<span class="label label-primary pull-right">4</span>
</a>
</li>
<li>
<a href="widgets.html">
<i class="fa fa-th"></i> <span class="glyphicon glyphicon-list-alt"> Daily Reports</span> <!--<small class="label pull-right bg-green">income reports</small>-->
</a>
</li>
<li>
<a href="widgets.html">
<i class="fa fa-th"></i> <span class="glyphicon glyphicon-list"> Monthly Reports</span> <!--<small class="label pull-right bg-green">income reports</small>-->
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-pie-chart"></i>
<span class="glyphicon glyphicon-credit-card"> Debts</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span class="glyphicon glyphicon-usd"> Outlay</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span class="glyphicon glyphicon-scale"> Statistics</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span class="glyphicon glyphicon-plus"> Equipments/Tools</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
</ul>
</div>
Have you intentionally not pasted your button code in your question?
If not, you should also have the following:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#uniqueid" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
You'll also want to add an id to your menu wrapper:
<div class="navbar-collapse collapse" id="uniqueid">
I can't figure out how to move the dropdown list so that it gets positioned on the right side of my main menus. Please see this screenshot that I want to achieve. http://i.imgur.com/nlAJgaC.png
Here is the code
<div id="sidebar-left" class="col-xs-2 col-sm-2 hidden-lg">
<ul class="nav main-menu">
<li>
<a href="#" class="align-center">
<i class="fa fa-dashboard"></i>
<span class="adClass hidden-xs">Menu 1</span>
</a>
</li>
<li class="dropdown">
<a class="align-center dropdown-toggle">
<i class="fa fa-print"></i>
<span class="adClass hidden-xs">Odometer</span>
</a>
<ul class="dropdown-menu">
<li><a ng-click="stopIt($event, 'submenu1')">submenu1</a></li>
<li><a ng-click="stopIt($event, 'submenu2')">submenu2</a></li>
<li><a ng-click="stopIt($event, 'submenu3')">submenu3</a></li>
<li><a ng-click="stopIt($event, 'submenu4')">submenu4</a></li>
</ul>
</li>
<li>
<a href="#" class="align-center">
<i class="fa fa-mobile"></i>
<span class="adClass hidden-xs">Menu 2</span>
</a>
</li>
<li>
<a href="#" class="align-center">
<i class="fa fa-flask"></i>
<span class="adClass hidden-xs">Menu 3</span>
</a>
</li>
<li>
<a href="#" class="align-center">
<i class="fa fa-bar-chart-o"></i>
<span class="adClass hidden-xs">Menu 4</span>
</a>
</li>
<li>
<a href="#" class="align-center">
<i class="fa fa-cogs"></i>
<span class="adClass hidden-xs">Menu 5</span>
</a>
</li>
<li>
<a href="#" class="align-center">
<i class="fa fa-clipboard"></i>
<span class="adClass hidden-xs">Menu 6</span>
</a>
</li>
</ul>
</div>
Bootstrap dropdowns use position: absolute; therefore you just need to move it left like:
.dropdown-menu { left: 106px; } just as much left as you need basically
I finally got it working but with the help of AngularJS. It's working great
var captureWidthOfSideBar = function() {
$rootScope.widthSideBar = (document.getElementById('left-sidebarId').offsetWidth + 10).toString() + "px";
};
captureWidthOfSideBar();
var resizeTimeout;
$(window).resize(function() {
if (resizeTimeout) {
$timeout.cancel(resizeTimeout);
}
resizeTimeout = $timeout(function() {
$scope.$apply(function() {
captureWidthOfSideBar();
});
}, 500);
});
then on my template, this is how it's called
<ul id="ddPrinterAnalytics" class="dropdown-menu" ng-style="{left : $root.widthSideBar}">
<li><a ng-click="stopIt($event, 'main.odometer')">Odometers</a></li>
<li><a ng-click="stopIt($event, 'login')">Real Time Print Job</a></li>
<li>Battery</li>
<li>Printhead</li>
</ul>
WOOHOO!!! :)