No Provider for TemplateRef! (ng2 bootstrap) - angularjs

I am using ng2 bootstrap and updated angular cli 1.0 version after that got above error here is my code. could you plz solve this problem
☰
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown" dropdown (onToggle)="toggled($event)">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"
dropdownToggle>
<i class="icon-bell"></i> <span class="badge badge-pill badge-danger">5</span>
</a>
<div class="dropdown-menu dropdown-menu-right" dropdownMenu aria-labelledby="simple-dropdown">
<a class="dropdown-item" href="#"><i class="fa fa-envelope"></i> You have 4 videos to Validate</a>
<a class="dropdown-item" href="#"><i class="fa fa-trophy"></i> Need to Declare winners for week 34</a>
</div>
</li>
<li class="nav-item dropdown" dropdown (onToggle)="toggled($event)">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"
dropdownToggle>
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin#tfc.com">
<span class="hidden-md-down">Super Admin</span>
</a>
<div class="dropdown-menu dropdown-menu-right" dropdownMenu aria-labelledby="simple-dropdown">
<a class="dropdown-item" href="#"><i class="fa fa-key"></i> Change Password</a>
<a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a>
</div>
</li>
</ul>


According to the docs it looks like your missing the * on the dropdownMenu. It should be
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu aria-labelledby="simple-dropdown">
So *dropdownMenu requires the *, but the dropdown directive does not.
Example from docs:
<div class="btn-group" dropdown>
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
Button dropdown <span class="caret"></span>
</button>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
</li>
</ul>
</div>

Related

Hamburger toggle icon works fine except when trying to leave one page on mobile

The Hamburger icon does not work on just one page from menu in mobile. I can access that page’s contents from the dropdown in mobile. But once there, the toggle icon does not function. The exasperating part is everything worked fine at one point. So I presume the glitch emerged while updating links.
Used Bootstrap5 components as a start for the navigation. The menu consists of “Home”, “My World, “Other World”. My lengthy troubleshooting effort included simply copying and pasting the entire nav from my index.html into Other World. Result: No dice.
The navigation currently works fine in and out of all pages with the exception of Other World. From mobile dropdown menu, I can access id’s within the page. However, once inside Other World, the toggle icon does not function in either portrait or landscape. My only escape is to hit the Brand / Home / Two Worlds button.
Thanks in advance for your insight and guidance.
<!-- /////////// START NAV SECTION ////////////// -->
<nav class="navbar navbar-expand-lg navbar-dark menu shadow fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="images/arts/TW-9DE802.svg" alt="logo image">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<!--<a class="nav-link active" aria-current="page" href="#"
style="color:#90d502;background:transparent;border:none;">Home</a>-->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="home"
data-bs-toggle="dropdown" aria-expanded="false"
style="color:#90d502;background:transparent;border:none;">
Home
</button>
<ul class="dropdown-menu" aria-labelledby="home">
<li><a class="dropdown-item" href="index.html#ambient-sector">Ambient Sector</a></li>
<li><a class="dropdown-item" href="index.html#vandi-verma">Vandi Verma</a></li>
<li><a class="dropdown-item" href="index.html#guion-bluford">Guion Bluford</a></li>
<li><a class="dropdown-item" href="index.html#righteous-vibes">Righteous Vibes</a></li>
<li><a class="dropdown-item" href="index.html#astronaut-awe">Astronaut Awe</a></li>
</ul>
</li>
<li class="nav-item">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="my-world"
data-bs-toggle="dropdown" aria-expanded="false"
style="color:#90d502;background:transparent;border:none;">
My World
</button>
<ul class="dropdown-menu" aria-labelledby="my-world">
<li><a class="dropdown-item" href="my-world.html#disrupt">Disrupt Convention</a></li>
<li><a class="dropdown-item" href="my-world.html#hypnosis">spellbound</a></li>
<li><a class="dropdown-item" href="my-world.html#rhetoric">Rhetoric</a></li>
<li><a class="dropdown-item" href="my-world.html#rhythm">Rhythm in Life</a></li>
<li><a class="dropdown-item" href="my-world.html#to-be-clear">To be Clear</a></li>
<li><a class="dropdown-item" href="my-world.html#influential">What a World</a></li>
<li><a class="dropdown-item" href="my-world.html#funny">Funny - Unius</a></li>
<div class="subnav">
<a class="nav-link" style="color:#90d502;background:transparent;border:none;"
href="tatlow-rawlings.html#losing-her">Tatlow & Rawlings<br>
The Common Sense Movement</a>
</ul>
</li>
<li class="nav-item">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="other-world"
data-bs-toggle="dropdown" aria-expanded="false"
style="color:#90d502;background:transparent;border:none;">
Other World
</button>
<ul class="dropdown-menu" aria-labelledby="other-world">
<li><a class="dropdown-item" href="other-world.html#story">Sharing Stories</a></li>
<li><a class="dropdown-item" href="other-world.html#ideas">Services</a></li>
<li><a class="dropdown-item" href="other-world.html#projects">Portfolio</a></li>
</ul>
</div>
</li>
</div>
</nav>
<!-- /////////// END NAV SECTION ////////////// -->

React Routers Giving 404 Error on Web but works perfectly fine on localhost

i have created a react app. but it have some react routers issue when i navigate the URL to another page locally it works perfectly fine but when i navigate by the link of http it gives a 404 error.
The navbar is changed in mobile device and in other devices.
here it is on other devices
and here it is on mobile devices
when i navigate the route to go on another page it shows the error of :
here is my code on mobile devices
<nav className="mobileTopBar">
<div className="container bg-grey m-0 text-light">
<div className="col-lg-7 pt-3">
<div className="row">
<div className="col-6">
<img src={MobileLogo} className="ms-2" alt="logo that will show on mobile screens only" />
</div>
<div className="col-6">
<div className="row pt-2">
<p className="col-1 top-pra fw-bolder text-white ms-1"> <i class="fas fa-phone-alt text-white"></i> </p>
<p className="col-1 top-pra fw-bolder text-white ms-1"> <i class="fab fa-whatsapp text-white"></i> </p>
<p className="col-1 top-pra fw-bolder"> <a className="col-1 text-decoration-none text-light" href="https://www.facebook.com/hosters.pk" target="_blank"> <i className="fab fa-facebook-f"> </i> </a> </p>
<p className="col-1 top-pra fw-bolder"> <a className="col-1 text-decoration-none text-light" href="https://www.youtube.com/channel/UCQAxN4p6gnl-T0M0UnIOr4w" target="_blank"> <i class="fab fa-youtube"></i> </a> </p>
<p className="col-1 top-pra fw-bolder ms-1"> <i className="fab fa-linkedin-in"></i> </p>
</div>
</div>
</div>
</div>
<div className="col-lg-5 ps-2 pb-3">
<div class="container-fluid text-start p-0 text-dark">
<button class="navbar-toggler me-5 btn bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-list navbar-toggler-icon text-dark"></i>
</button>
<div class="collapse navbar-collapse me-5" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<span class="nav-link text-white ms-2" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Hosting
<p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span><ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/windows">
<li>
<span class="dropdown-item " href="#">Windows Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/hosting">
<li>
<span class="dropdown-item " href="#">Shared Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/reseller">
<li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/vps">
<li>
<span class="dropdown-item " href="#">VPS Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/dedicate">
<li>
<span class="dropdown-item " href="#">Dedicated Hosting</span>
</li>
</a>
</ul>
</li>
<li class="nav-item text-dark">
<span href="#" class="nav-link mx-2 text-decoration-none">
<a class="text-decoration-none text-white" target="_blank" href="https://hoster.pk/clientarea/cart.php?a=add&domain=register"> Domain </a>
</span>
</li>
<li class="nav-item dropdown">
<span class="nav-link text-white ms-2" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Partners
<p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/reseller"><li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a href="https://SSLS.pk" class="text-decoration-none" target="_blank">
<li>
<span class="dropdown-item " href="#">SSL Reseller</span>
</li>
</a>
<a class="text-decoration-none" href="/Domain">
<li>
<span class="dropdown-item " href="#">Domain Reseller</span>
</li>
</a>
</ul>
</li>
<li class="nav-item">
<span class="nav-link mx-2 " href="#">
<a class="text-decoration-none text-white" href="/affiliate"> Affiliate </a>
</span>
</li>
<li class="nav-item">
<span href="https://hoster.pk/blog/" class="nav-link mx-2 er text-decoration-none">
<a target="_blank" class="text-decoration-none text-white" href="https://hoster.pk/blog/"> Blog </a>
</span>
</li>
</ul>
<button class="btn nav-btn bg-green rounded-pill px-4 p-2 lh-lg text-white fw-bolder" type="submit">
<p class="m-0">
<a target="_blank" class="text-decoration-none text-light" href="https://hoster.pk/clientarea/">CLIENTAREA</a>
</p>
</button>
</div>
</div>
</div>
</div>
</nav>
and on other devices
<nav class="navbar navbar-expand-lg bg-white p-0 m-0 navbar-light">
<div class="container-fluid text-center p-0">
<span class="navbar-brand p-0 m-0" href="#">
<a class="text-decoration-none " href="/">
<img alt="pictures" src={OtherDeviceLogo} className="w-50" />
</a>
</span>
<div className="w-60 float-start OtherDevice">
<div className="my-1">
<form className='card-form p-1 bg-l-grey mx-1' action="https://hoster.pk/clientarea/cart.php?a=add&domain=register" method="post" target='_blank'>
<input type="text" name="query" size="20" className='card-input border-0 px-4 bg-l-grey w-100' placeholder='Find Your Perfect Domain' />
<button type="submit" value="Go" className='card-button btn bg-green w-25 text-white fw-bolder'> Go </button>
</form>
</div>
</div>
<button class="navbar-toggler me-5" 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 text-green">
</span>
</button>
<div class="collapse navbar-collapse me-5" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<span class="nav-link text-dark d-flex" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Hosting
<p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/windows">
<li>
<span class="dropdown-item " href="#">Windows Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/hosting">
<li>
<span class="dropdown-item " href="#">Shared Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/reseller">
<li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/vps">
<li>
<span class="dropdown-item " href="#">VPS Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/dedicate">
<li>
<span class="dropdown-item " href="#">Dedicated Hosting</span>
</li>
</a>
</ul>
</li>
<li class="nav-item">
<span href="#" class="nav-link text-dark mx-2 text-decoration-none">
<a class="text-decoration-none" target="_blank" href="https://hoster.pk/clientarea/cart.php?a=add&domain=register"> Domain </a>
</span>
</li>
<li class="nav-item dropdown">
<span class="nav-link text-dark" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Partners <p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/reseller"><li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a href="https://SSLS.pk" class="text-decoration-none" target="_blank">
<li>
<span class="dropdown-item " href="#">SSL Reseller</span>
</li>
</a>
<a class="text-decoration-none" href="/Domain">
<li>
<span class="dropdown-item" href="#">Domain Reseller</span>
</li>
</a>
</ul>
</li>
<li class="nav-item">
<span class="nav-link mx-2 " href="#">
<a class="text-decoration-none" href="/affiliate"> Affiliate </a>
</span>
</li>
<li class="nav-item">
<span href="https://hoster.pk/blog/" class="nav-link mx-2 er text-decoration-none">
<a target="_blank" class="text-decoration-none" href="https://hoster.pk/blog/"> Blog </a>
</span>
</li>
</ul>
<button class="btn nav-btn bg-green rounded-pill px-4 p-2 lh-lg text-white fw-bolder" type="submit">
<p class="m-0">
<a target="_blank" class="text-decoration-none text-light" href="https://hoster.pk/clientarea/">CLIENTAREA</a>
</p>
</button>
</div>
</div>
</nav>
thanks in advance :)

If you install React Router Dom, you have to change
from <a class="text-decoration-none" href="/windows">
to <Link class="text-decoration-none" to="/windows">
Enter this link for more https://reactrouter.com/docs/en/v6/getting-started/overview#navigation

Call to undefined method App\User::gravatar()

<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="{{ url('/home') }}" class="brand-link">
<img src="{{ asset('/backend/dist/img/AdminLTELogo.png')}}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<?php $currentUser = Auth::user();?>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="{{ $currentUser->gravatar() }}" class="img-circle elevation-2" alt="{{ $currentUser->name }}">
</div>
<div class="info">
{{ $currentUser->name }}
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fa fa-dashboard"></i>
<p>
Dashboard
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="./index.html" class="nav-link active">
<i class="fa fa-circle-o nav-icon"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="./index2.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="./index3.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="pages/widgets.html" class="nav-link">
<i class="nav-icon fa fa-th"></i>
<p>
Widgets
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-pie-chart"></i>
<p>
Charts
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/charts/chartjs.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>ChartJS</p>
</a>
</li>
<li class="nav-item">
<a href="pages/charts/flot.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Flot</p>
</a>
</li>
<li class="nav-item">
<a href="pages/charts/inline.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Inline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-tree"></i>
<p>
UI Elements
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/UI/general.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="pages/UI/icons.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="pages/UI/buttons.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Buttons</p>
</a>
</li>
<li class="nav-item">
<a href="pages/UI/sliders.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Sliders</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-edit"></i>
<p>
Blog
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>All Posts</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Add New</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-table"></i>
<p>
Tables
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/tables/simple.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Simple Tables</p>
</a>
</li>
<li class="nav-item">
<a href="pages/tables/data.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Data Tables</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="pages/calendar.html" class="nav-link">
<i class="nav-icon fa fa-calendar"></i>
<p>
Calendar
<span class="badge badge-info right">2</span>
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-envelope-o"></i>
<p>
Mailbox
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/mailbox/mailbox.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Inbox</p>
</a>
</li>
<li class="nav-item">
<a href="pages/mailbox/compose.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Compose</p>
</a>
</li>
<li class="nav-item">
<a href="pages/mailbox/read-mail.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Read</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-book"></i>
<p>
Pages
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/examples/invoice.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Invoice</p>
</a>
</li>
<li class="nav-item">
<a href="pages/examples/profile.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Profile</p>
</a>
</li>
<li class="nav-item">
<a href="pages/examples/login.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="pages/examples/register.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Register</p>
</a>
</li>
<li class="nav-item">
<a href="pages/examples/lockscreen.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Lockscreen</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-plus-square-o"></i>
<p>
Extras
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/examples/404.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Error 404</p>
</a>
</li>
<li class="nav-item">
<a href="pages/examples/500.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Error 500</p>
</a>
</li>
<li class="nav-item">
<a href="pages/examples/blank.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Blank Page</p>
</a>
</li>
<li class="nav-item">
<a href="starter.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Starter Page</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">MISCELLANEOUS</li>
<li class="nav-item">
<a href="https://adminlte.io/docs" class="nav-link">
<i class="nav-icon fa fa-file"></i>
<p>Documentation</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-circle-o text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-circle-o text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-circle-o text-info"></i>
<p>Informational</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
ErrorException (E_ERROR)
Call to undefined method App\User::gravatar() (View: D:\xampp\htdocs\asset_manage\resources\views\layouts\backend\sidebar.blade.php) (View: D:\xampp\htdocs\asset_manage\resources\views\layouts\backend\sidebar.blade.php) (View: D:\xampp\htdocs\asset_manage\resources\views\layouts\backend\sidebar.blade.php)
enter image description here
enter image description here
enter image description here

Can you set the Gravatar value in the view parameter in your controller?
return view('YOUR_BLADE', ['gravatar' => $currentUser->gravatar()]);

If you have a column in users table named 'gravatar' then you can simply use in this way to get gravatar data of current user.
{{ Auth::user()->gravatar }}

how to align column to the right?

I am getting my head around twitter bootstrap 3 and specifically the column setup. I got a 2 columns on the same line:
<!--datetime row-->
<div>
<div class="col-md-6 form-group">
<label for="">Title:</label>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="col-md-6 form-group">
why is this left instead of right aligned??
</div>
</div>
The problem is I cannot get the second column to sit to the right where the dropdown is. So I would like the dropdown in the first column and in the second column the 'why is this...' text. What causes this? Here is a ref to the full snippet: http://plnkr.co/edit/tufLd2?p=preview

You can add ' text-right to your <div class="col-md-6 form-group">
please see here
http://plnkr.co/edit/rUAdxLJ6ExKZYFbkveuC?p=preview
and if you want to have column for 50% of screen even on small devices
change col-md-6 to col-xs-6
http://plnkr.co/edit/RxPx0zzT5YmodepQ3zIj?p=preview

This might solve the problem
<div>
<div class="col-xs-6 form-group">
<label for="">Title:</label>
</div>
<div class="col-xs-6 form-group text-right">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="col-md-6 form-group">
why is this left instead of right aligned??
</div>
</div>
Live Demo

<!--datetime row-->
<div **class="row"**>
<div class="col-md-6 form-group">
<label for="">Title:</label>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="col-md-6 form-group">
why is this left instead of right aligned??
</div>
</div>

Copy this code in your example and scratch the preview window to the left.
<form class="form-horizontal">
<div class="form-group">
<label for="" class="col-sm-2 control-label">Title:</label>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class=" form-group">
why is this left instead of right aligned??
</div>
Live example

Twitter Bootsrap - Dropdown Menu not showing on mobile devices

Can anyone help me figure out why my menu is not displaying on my mobile device.
The collapsible menu is displaying fine in the browser but on a mobile (or narrow browser window), no links are displayed when you click the 3 bars that should display the links.
I am using jhipster so my code is split between multiple files.
All menus are working fine bar the menu options that should appear on a mobile device.
Any help is greatly appreciated
My header.html is as follows
<header class="clearfix">
<i class="fa fa-bars"></i>
<!-- Logo -->
<div class="logo">
<a href="#/">
<span translate="global.title">Cloud Ranger</span>
</a>
</div>
<div class="menu-button" toggle-off-canvas data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="top-nav">
<ul class="nav-right pull-right list-unstyled">
<li class="dropdown langs text-normal" ng-controller="LanguageController">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><span translate="global.menu.language">Language</span>
</a>
<ul class="dropdown-menu with-arrow pull-right list-langs" role="menu">
<li data-ng-show="lang !== 'English' ">
English</li>
</ul>
</li>
</ul>
</div>
</header>
My navbar.html is as follows
<div id="nav-wrapper" >
<div ng-switch="isAuthenticated()">
<ul id="nav" role="navigation" ng-controller="NavbarController"
data-collapse-nav data-highlight-active data-slim-scroll>
<li ui-sref-active="active" ng-switch-when="false"><a
href="#/login"> <i class="fa fa-user"></i> <span
class="icon-bg bg-danger"></span> <span class="hidden-tablet"
translate="global.menu.account.login">Login</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="false"><a
href="#/register"> <i class="fa fa-user"></i> <span
class="icon-bg bg-danger"></span> <span class="hidden-tablet"
translate="global.menu.account.register">Register</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="home"> <i class="fa fa-home"> <span
class="icon-bg bg-danger"></span></i> <span class="hidden-tablet"
translate="global.menu.home">Dashboard</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="credential"><i class="fa fa-cloud"><span
class="icon-bg bg-orange"></span></i><span class="hidden-tablet"
translate="global.menu.entities.credential">Credential</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="schedule"><i class="fa fa-calendar"><span
class="icon-bg bg-warning"></span></i><span class="hidden-tablet"
translate="global.menu.entities.schedules">Schedules</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="userTask"><i class="fa fa-tasks"><span
class="icon-bg bg-info"></span></i><span class="hidden-tablet"
translate="global.menu.entities.userTask">Tasks</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="taskExecutionLog"><i class="fa fa-bar-chart-o"><span
class="icon-bg bg-primary"></span></i><span class="hidden-tablet"
translate="global.menu.admin.logs">Logs</span></a></li>
<li>
<a href="#/password"><i class="fa fa-user"><span class="icon-bg bg-danger"></span></i><span
translate="global.menu.account.settings">Account></span></a>
<ul>
<li ui-sref-active="active"><a ui-sref="password"><i class="fa fa-caret-right"></i><span translate="global.menu.account.password">Password</span></a></li>
<li ui-sref-active="active"><a ui-sref="settings"><i class="fa fa-caret-right"></i><span translate="global.menu.account.settings">Settings</span></a></li>
<li ui-sref-active="active"><i class="fa fa-caret-right"></i><span translate="global.menu.account.logout">Logout</span></li>
</ul>
</li>
</ul>
</div>
</div>

Hello Demo have you looked through your CSS file and checked that the collapsible menu is not been disabled for smaller screens through the means of the #media queries, for instance #media (min-width: xxpx) can be used to define different style rules for different media types/devices. Hope this helps.

Resources