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">
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>
I have a question if and how the following is achievable through CSS:
View 1 (large screens):
View 2 (medium-sized screens):
Secondary question: How to center the navigation elements as soon as they are placed in a the second line?
View 3 (mobile):
My problem is, that the right part of the navigation (govel, bookmark, ..., login) should be in the same line as the logo, if there is not enough space (medium-sized screens, View 2). But if mobile navigation gets activated (View 3), I want to be the "Suche", "Kataloge", "Kategorien"... links first.
Also it would be nice if the navigation elements can be centered in (View 2).
The whole thing is build with Bootstrap 3.
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
nav#header img.favicon-logo {
padding-top: 5px;
height: 46px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" id="header">
<div class="container-fluid">
<!-- Titel und Schalter werden für eine bessere mobile Ansicht zusammengefasst -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/">
<img src="https://www.lotsearch.de/images/favicons/favicon_144x144.png" class="favicon-logo">
</a>
</div>
<!-- Alle Navigationslinks, Formulare und anderer Inhalt werden hier zusammengefasst und können dann ein- und ausgeblendet werden -->
<div class="navbar-collapse collapse" id="main-menu" aria-expanded="false" style="height: 1px;">
<div class="navbar-inner">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-search"></i>
Suche <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="fa fa-lightbulb-o fa-fw"></i> Suche (Aktuelle Auktionen)</li>
<li><i class="fa fa-archive fa-fw"></i> Suche (Archiv)</li>
</ul>
</li>
<li>
<a href="/auction-catalogs">
<i class="fa fa-book fa-fw"></i>
Kataloge </a>
</li>
<li>
<i class="fa fa-list-alt fa-fw"></i> Kategorien
</li>
<li>
<i class="fa fa-bell fa-fw"></i> Suchaufträge
</li>
<li>
<i class="fa fa-bar-chart fa-fw"></i> Künstler / Analysen
</li>
<li>
<i class="fa fa-newspaper-o fa-fw"></i> Blog
</li>
<li>
<i class="fa fa-star fa-fw"></i> Top-Seiten
</li>
<li>
<i class="fa fa-pencil-square-o fa-fw"></i> Registrieren
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/bids/management/bidlist" title="Vorgemerkte Gebote auf Ihrer Bietliste">
<div class="icon-wrapper hidden-xs">
<i class="fa fa-gavel fa-fw"></i>
<span class="badge badge-orange" id="bidlist-counter">0</span>
</div>
<div class="visible-xs">
<i class="fa fa-gavel fa-fw"></i> Gebote (Bietliste)
</div>
</a>
</li>
<li>
<a href="/favorites" title="Merkzettel">
<div class="icon-wrapper hidden-xs">
<i class="fa fa-bookmark fa-fw"></i>
<span class="badge badge-orange" id="bookmark-counter">0</span>
</div>
<div class="visible-xs">
<i class="fa fa-bookmark fa-fw"></i> Merkzettel
</div>
</a>
</li>
<li class="dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="flag-icon flag-icon-de"></span>
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-langauge">
<li><span class="flag-icon flag-icon-gb"></span> GB </li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-user fa-fw"></i> Login <span class="caret"></span>
<ul class="dropdown-menu dropdown-lr animated fadeIn" role="menu">
<li>
<div class="col-lg-12">
<h4>Login</h4>
<form method="post" name="loginform" action="/user/login" id="loginform">
<div class="form-group "><label>Email</label><input name="identity" type="text" tabindex="1" class="form-control" value=""></div>
<div class="form-group ">
<label for="credential">Passwort</label> <span class="pull-right">Passwort vergessen?</span>
<input type="password" name="credential" tabindex="2" class="form-control" value="">
</div>
<div class="form-group "><button type="submit" name="submit" class="form-control btn-orange btn btn-default" tabindex="3" value=""><span class="fa fa-sign-in"></span> Einloggen</button></div>
</form>
<div class="text-center pt-5px">
<p class="pb-5px">- ODER -</p>
<a class="btn btn-default" href="/user/registration/select-product">
<i class="fa fa-pencil-square-o"></i> Registrierung </a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
How would I go about modifying the CSS to delete the bullet I got for every item menu of the navbar Bootstrap 4/Jhipster? Now there's both the bullet and the picture <i class="fa fa-home" aria-hidden="true"></i> and I want to delete the bullet. This is the code snippet:
<nav>
<div class="jh-logo-container float-left">
<a class="jh-navbar-toggler d-lg-none float-right" href="javascript:void(0);" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" (click)="toggleNavbar()">
<!--<i class="fa fa-bars"></i>-->
</a>
</div>
<div id="navbarResponsive" [ngSwitch]="isAuthenticated()">
<ul>
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link" routerLink="/" (click)="collapseNavbar()">
<span>
<i class="fa fa-home" aria-hidden="true"></i>
<span jhiTranslate="global.menu.home">Home</span>
</span>
</a>
</li>
...
</ul>
</div>
</nav>
For Font Awesome you should use its built in way to do lists with icons.
Example:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
Check the docs for more info.
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