diff --git a/frappe/public/js/frappe/ui/toolbar/navbar.html b/frappe/public/js/frappe/ui/toolbar/navbar.html
index bc1c14dc47..e418ee238b 100644
--- a/frappe/public/js/frappe/ui/toolbar/navbar.html
+++ b/frappe/public/js/frappe/ui/toolbar/navbar.html
@@ -1,115 +1,90 @@
-<div class="navbar navbar-default navbar-fixed-top" role="navigation">
+<nav class="navbar navbar-expand-lg fixed-top" role="navigation">
 	<div class="container">
-		<div class="navbar-header navbar-desk">
-			<a class="navbar-brand toggle-sidebar visible-xs visible-sm">
-				<i class="octicon octicon-three-bars"></i>
-			</a>
-			<a class="navbar-brand navbar-home hidden-xs hidden-sm" href="#">
-				<img class="app-logo" src="{{ frappe.app.logo_url }}">
-			</a>
-			<ul class="nav navbar-nav" id="navbar-breadcrumbs">
+		<a class="navbar-brand navbar-home hidden-xs hidden-sm" href="#">
+			<img class="d-inline-block align-top app-logo" src="{{ frappe.app.logo_url }}">
+		</a>
+		<button
+			class="navbar-toggler"
+			data-toggle="collapse"
+			data-target="#navbar-items"
+			aria-controls="navbar-items"
+			aria-expanded="false"
+			aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon octicon octicon-three-bars"></span>
+		</button>
+		<div class="collapse navbar-collapse" id="navbar-items">
+			<form class="form-inline" role="search" onsubmit="return false;">
+				<div class="input-group" style="width: 100%">
+					<input id="modal-search" type="text" class="form-control" placeholder="{%= __("Search or type a command") %}" aria-haspopup="true">
+					<button type="reset" class="close" data-dismiss="modal">
+						<i class="octicon octicon-x"></i>
+					</button>
+				</div>
+			</form>
+			<ul class="navbar-nav">
+				<li class="nav-item dropdown dropdown-navbar-user dropdown-mobile">
+					<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" onclick="return false;">
+						<!-- {{ avatar }} -->
+						{%= __("Settings") %}
+						<!-- <span class="ellipsis toolbar-user-fullname d-none d-sm-none d-md-block navbar-text"></span> -->
+					</a>
+					<div class="dropdown-menu" id="toolbar-user" role="menu">
+						<a class="dropdown-item" href="#user-profile">
+							{%= __("My Profile") %}
+						</a>
+						<a class="dropdown-item" href="#Form/User/{%= encodeURIComponent(frappe.session.user) %}">
+							{%= __("My Settings") %}
+						</a>
+						<a class="dropdown-item" href="#" onclick="return frappe.ui.toolbar.setup_session_defaults();">
+							{%= __("Session Defaults") %}
+						</a>
+						<a class="dropdown-item navbar-reload" href="" onclick="return frappe.ui.toolbar.clear_cache();">
+							{%= __("Reload") %}
+						</a>
+						<a class="dropdown-item" href="/index" target="_blank" rel="noopener noreferrer">
+							{%= __("View Website") %}
+						</a>
+						<a class="dropdown-item navbar-toggle-full-width" href="#" onclick="return false">
+							{%= __("Toggle Full Width") %}
+						</a>
+						<a class="dropdown-item" href="#background_jobs">
+							{%= __("Background Jobs") %}
+						</a>
+						<div class="divider"></div>
+						<a class="dropdown-item" href="#" onclick="return frappe.app.logout();">
+							{%= __("Logout") %}
+						</a>
+					</div>
+				</li>
+				<li class="nav-item dropdown dropdown-help dropdown-mobile">
+					<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" onclick="return false;">
+						{{ __("Help") }}
+						<span class="d-block d-sm-block d-md-none standard-image help-icon">?</span>
+					</a>
+					<div class="dropdown-menu" id="toolbar-help" role="menu">
+						<div class="divider documentation-links"></div>
+						<a class="dropdown-item" href="#" onclick="return frappe.ui.toolbar.show_about();">
+							{%= __("About") %}
+						</a>
+						<a class="dropdown-item" href="#" onclick="return frappe.ui.toolbar.show_shortcuts(event);">
+							{%= __("Keyboard Shortcuts") %}
+						</a>
+					</div>
+				</li>
+				<li class="nav-item dropdown dropdown-notifications dropdown-mobile">
+					<span class="notifications-indicator"><i class="fa fa-circle"></i></span>
+					<a
+						class="nav-link dropdown-toggle notifications-icon"
+						data-toggle="dropdown"
+						aria-haspopup="true"
+						aria-expanded="true"
+						href="#"
+						onclick="return false;">
+						<span><i class="fa fa-bell" aria-hidden="true"></i></span>
+					</a>
+					<div class="dropdown-menu notifications-list" role="menu"></div>
+				</li>
 			</ul>
 		</div>
-		<div class="navbar-center ellipsis" style="display: none;"></div>
-
-		<ul class="nav navbar-nav navbar-right">
-			<li class="visible-xs">
-				<a class="navbar-search-button" href="#" data-toggle="modal" data-target="#search-modal"><i class="octicon octicon-search"></i></a>
-			</li>
-			<li class="dropdown dropdown-navbar-user dropdown-mobile">
-				<a class="dropdown-toggle" data-toggle="dropdown" href="#"
-					onclick="return false;">
-				{{ avatar }}
-				<span class="ellipsis toolbar-user-fullname hidden-xs hidden-sm">
-					{%= __("Settings") %}</span>
-				<b class="caret hidden-xs hidden-sm"></b></a>
-				<ul class="dropdown-menu" id="toolbar-user" role="menu">
-					<li><a href="#user-profile">
-						{%= __("My Profile") %}</a></li>
-					<li><a href="#Form/User/{%= encodeURIComponent(frappe.session.user) %}">
-						{%= __("My Settings") %}</a></li>
-					<li><a href="#" onclick="return frappe.ui.toolbar.setup_session_defaults();">
-							{%= __("Session Defaults") %}</a></li>
-					<li class="navbar-reload">
-						<a href="" onclick="return frappe.ui.toolbar.clear_cache();">
-						{%= __("Reload") %}</a></li>
-					<li><a href="/index" target="_blank" rel="noopener noreferrer">
-						{%= __("View Website") %}</a></li>
-					<li class="navbar-toggle-full-width">
-						<a href="#" onclick="return false">{%= __("Toggle Full Width") %}</a>
-					</li>
-					<li><a href="#background_jobs">
-						{%= __("Background Jobs") %}</a></li>
-					<li class="divider"></li>
-					<li><a href="#" onclick="return frappe.app.logout();">
-						{%= __("Logout") %}</a></li>
-				</ul>
-			</li>
-
-			<li class="dropdown dropdown-help dropdown-mobile">
-				<a class="dropdown-toggle" data-toggle="dropdown" href="#"
-					onclick="return false;"  style="height: 40px;">
-					<span class="hidden-xs hidden-sm" style="line-height: 24px;">{{ __("Help") }} <b class="caret"></b></span>
-					<span class="visible-xs visible-sm standard-image help-icon">?</span>
-				</a>
-				<ul class="dropdown-menu" id="toolbar-help" role="menu">
-					<li id="help-links"></li>
-					<li class="divider"></li>
-					<li class="divider documentation-links"></li>
-					<li><a href="#" onclick="return frappe.ui.toolbar.show_about();">
-						{%= __("About") %}</a></li>
-					<li><a href="#" onclick="return frappe.ui.toolbar.show_shortcuts(event);">
-						{%= __("Keyboard Shortcuts") %}</a></li>
-				</ul>
-			</li>
-
-			<!-- frappe.chat -->
-			<!-- "placeholder, to display or not to display." -->
-			<li class="frappe-chat-dropdown"></li>
-			<!-- end frappe.chat -->
-
-			<li class="dropdown dropdown-notifications dropdown-mobile">
-				<span class="notifications-indicator"><i class="fa fa-circle"></i></span>
-				<a
-					class="dropdown-toggle notifications-icon"
-					data-toggle="dropdown"
-					aria-haspopup="true"
-					aria-expanded="true"
-					href="#"
-					onclick="return false;">
-					<span><i class="fa fa-bell" aria-hidden="true"></i></span>
-				</a>
-				<ul
-					class="dropdown-menu notifications-list"
-					role="menu">
-				</ul>
-			</li>
-		</ul>
-
-		<div id="search-modal" class="modal fade" role="dialog">
-			<div class="modal-dialog" style="height: 50px;">
-				<div class="modal-content">
-					<div class="modal-header">
-						<form role="search" onsubmit="return false;">
-							<div class="input-group" style="width: 100%">
-								<input id="modal-search" type="text" class="form-control"
-								placeholder="{%= __("Search or type a command") %}" aria-haspopup="true">
-								<button type="reset" class="close" data-dismiss="modal"><i class="octicon octicon-x"></i></button>
-							</div>
-						</form>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<div class="hidden-xs">
-			<form class="navbar-form navbar-right" role="search" onsubmit="return false;">
-			  <div class="form-group form-group-sm ui-front">
-				<input id="navbar-search" type="text" class="form-control"
-					placeholder="{%= __("Search or type a command") %} {%= __("(Ctrl + G)") %}" aria-haspopup="true">
-				<span class="octicon octicon-search navbar-search-icon"></span>
-			  </div>
-			</form>
-		</div>
 	</div>
-</div>
+</nav>