Fix Jekyll variables and Liquid consistency tweaks

* add `baseurl`
* add `url`
This commit is contained in:
XhmikosR 2020-05-31 16:19:29 +03:00
parent 4bc6c1e8d6
commit edc51cc61b
10 changed files with 455 additions and 458 deletions

View file

@ -2,11 +2,9 @@ title: AdminLTE v3 Documentation
version: v3.1.0-pre
description: AdminLTE v3 Documentation
markdown: kramdown
kramdown:
auto_ids: false
baseurl: /docs/3.1
url: https://adminlte.io
highlighter: rouge
plugins:
- jekyll-seo-tag
- jekyll-sitemap

View file

@ -1,5 +1,4 @@
<script src="{{ 'assets/plugins/jquery/jquery.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ 'assets/plugins/bootstrap/js/bootstrap.bundle.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ 'assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ 'assets/js/adminlte.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/assets/plugins/jquery/jquery.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/assets/plugins/bootstrap/js/bootstrap.bundle.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/assets/js/adminlte.min.js' | prepend: site.baseurl }}"></script>

View file

@ -1,6 +1,6 @@
<footer class="main-footer">
<div class="float-right d-none d-sm-inline">
{{site.version}}
</div>
<strong>Copyright &copy; 2014-{{ site.time | date: '%Y' }} <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
</footer>
<footer class="main-footer">
<div class="float-right d-none d-sm-inline">
{{ site.version }}
</div>
<strong>Copyright &copy; 2014-{{ site.time | date: '%Y' }} <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
</footer>

View file

@ -1,14 +1,14 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
{% seo %}
{% seo %}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<link rel="stylesheet" href="{{'assets/plugins/fontawesome-free/css/all.min.css' | prepend: site.baseurl}}">
<link rel="stylesheet" href="{{'assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css' | prepend: site.baseurl}}">
<link rel="stylesheet" href="{{'assets/css/docs.css' | prepend: site.baseurl}}">
<link rel="stylesheet" href="{{'assets/css/highlighter.css' | prepend: site.baseurl}}">
<link rel="stylesheet" href="{{'assets/css/adminlte.min.css' | prepend: site.baseurl}}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<link rel="stylesheet" href="{{ '/assets/plugins/fontawesome-free/css/all.min.css' | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ '/assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css' | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ '/assets/css/docs.css' | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ '/assets/css/highlighter.css' | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ '/assets/css/adminlte.min.css' | prepend: site.baseurl }}">
</head>

View file

@ -1,36 +1,36 @@
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link bg-info rounded dropdown-toggle" href="#" id="navbarVersionDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v3.0
</a>
<div class="dropdown-menu py-0" aria-labelledby="navbarVersionDropdown">
<a class="dropdown-item bg-info disabled" href="#">v3.0</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://adminlte.io/docs/2.4/installation">v2.4</a>
<a class="dropdown-item" href="https://adminlte.io/themes/AdminLTE/documentation/index.html">&lt;= v2.3</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<!-- <li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li> -->
</ul>
<!-- SEARCH FORM -->
<!-- <form class="form-check-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link bg-info rounded dropdown-toggle" href="#" id="navbarVersionDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v3.0
</a>
<div class="dropdown-menu py-0" aria-labelledby="navbarVersionDropdown">
<a class="dropdown-item bg-info disabled" href="#">v3.0</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://adminlte.io/docs/2.4/installation">v2.4</a>
<a class="dropdown-item" href="https://adminlte.io/themes/AdminLTE/documentation/index.html">&lt;= v2.3</a>
</div>
</form> -->
</nav>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<!-- <li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li> -->
</ul>
<!-- SEARCH FORM -->
<!-- <form class="form-check-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form> -->
</nav>

View file

@ -1,51 +1,51 @@
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<a href="{{'index.html' | prepend: site.baseurl}}" class="brand-link logo-switch">
<img src="{{'assets/img/logo-xs.png' | prepend: site.baseurl}}" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs">
<img src="{{'assets/img/logo-xl.png' | prepend: site.baseurl}}" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px">
</a>
<div class="sidebar">
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu">
{% for item in site.navigation %}
{% assign subitem_active = 'false' %}
{% for subitem in item.subitems %}
{% assign subitem_url = '/' | append: subitem.url %}
{% if subitem_url == page.url %}
{% assign subitem_active = 'true' %}
{% endif %}
{% endfor %}
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<a href="{{ '/index.html' | prepend: site.baseurl }}" class="brand-link logo-switch">
<img src="{{ '/assets/img/logo-xs.png' | prepend: site.baseurl }}" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs">
<img src="{{ '/assets/img/logo-xl.png' | prepend: site.baseurl }}" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px">
</a>
<div class="sidebar">
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu">
{% for item in site.navigation -%}
{%- assign subitem_active = 'false' -%}
{%- for subitem in item.subitems -%}
{%- assign subitem_url = '/' | append: subitem.url -%}
{%- if subitem_url == page.url -%}
{%- assign subitem_active = 'true' -%}
{%- endif -%}
{%- endfor %}
<li class="nav-item {% if item.subitems %}has-treeview{% endif %} {% if subitem_active == 'true' %}menu-open{% endif %}">
{% if item.url == 'index.html' %}
{% assign item_url = '/' %}
{% else %}
{% assign item_url = '/' | append: item.url %}
{% endif %}
<li class="nav-item{% if item.subitems %} has-treeview{% endif %}{% if subitem_active == 'true' %} menu-open{% endif %}">
{% if item.url == 'index.html' -%}
{%- assign item_url = '/' -%}
{%- else -%}
{%- assign item_url = '/' | append: item.url -%}
{%- endif %}
<a href="{% if item.url %}{{item.url | prepend: site.baseurl}}{% else %}#{% endif %}" class="nav-link {% if item_url == page.url %}active{% endif %}{% if subitem_active == 'true'%}active{% endif %}">
<i class="nav-icon {{item.icon}}"></i>
<p>
{{item.title}}
{% if item.subitems %}<i class="right fas fa-angle-left"></i>{% endif %}
</p>
</a>
<a href="{% if item.url %}{{ item.url | prepend: "/" | prepend: site.baseurl }}{% else %}#{% endif %}" class="nav-link{% if item_url == page.url %} active{% endif %}{% if subitem_active == 'true'%} active{% endif %}">
<i class="nav-icon {{ item.icon }}"></i>
<p>
{{ item.title }}
{% if item.subitems %}<i class="right fas fa-angle-left"></i>{% endif %}
</p>
</a>
{% if item.subitems %}
<ul class="nav nav-treeview">
{% for subitem in item.subitems %}
{% assign subitem_url = '/' | append: subitem.url %}
<li class="nav-item">
<a href="{{subitem.url | prepend: site.baseurl}}" class="nav-link {% if subitem_url == page.url %}active{% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>{{subitem.title}}</p>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
</div>
</aside>
{% if item.subitems -%}
<ul class="nav nav-treeview">
{% for subitem in item.subitems -%}
{%- assign subitem_url = '/' | append: subitem.url -%}
<li class="nav-item">
<a href="{{ subitem.url | prepend: "/" | prepend: site.baseurl }}" class="nav-link{% if subitem_url == page.url %} active{% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>{{ subitem.title }}</p>
</a>
</li>
{%- endfor %}
</ul>
{%- endif %}
</li>
{% endfor %}
</ul>
</nav>
</div>
</aside>

View file

@ -9,11 +9,11 @@
{%- include navbar.html -%}
{%- include sidebar.html -%}
{{content}}
{{ content }}
{%- include footer.html -%}
</div>
{%- include foot.html -%}
{% include foot.html -%}
</body>
</html>

View file

@ -4,10 +4,10 @@ layout: default
<div class="content-wrapper px-4 py-2">
<div class="content-header">
<h1 class="text-dark">{{page.title}}</h1>
<h1 class="text-dark">{{ page.title }}</h1>
</div>
<div class="content px-2">
{{content}}
{{ content }}
</div>
</div>

View file

@ -29,7 +29,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
@ -39,7 +39,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
You better believe it!
</div>
@ -49,7 +49,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
</div>
@ -59,7 +59,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
I would love to.
</div>
@ -70,7 +70,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
@ -82,7 +82,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user7-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user7-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Sarah Doe
@ -94,7 +94,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nadia Jolie
@ -106,7 +106,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user5-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user5-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nora S. Vans
@ -118,7 +118,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user6-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user6-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
John K.
@ -130,7 +130,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user8-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user8-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Kenneth M.
@ -178,7 +178,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
@ -188,7 +188,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
You better believe it!
</div>
@ -198,7 +198,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
</div>
@ -208,7 +208,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
I would love to.
</div>
@ -219,7 +219,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
@ -231,7 +231,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user7-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user7-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Sarah Doe
@ -243,7 +243,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nadia Jolie
@ -255,7 +255,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user5-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user5-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nora S. Vans
@ -267,7 +267,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user6-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user6-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
John K.
@ -279,7 +279,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user8-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user8-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Kenneth M.
@ -336,7 +336,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
@ -351,7 +351,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
You better believe it!
@ -366,7 +366,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
@ -381,7 +381,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
I would love to.
@ -396,7 +396,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}">
<img class="contacts-list-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
@ -410,7 +410,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user7-128x128.jpg' | relative_url}}">
<img class="contacts-list-img" src="{{ '/assets/img/user7-128x128.jpg' | prepend: site.baseurl }}">
<div class="contacts-list-info">
<span class="contacts-list-name">
Sarah Doe
@ -424,7 +424,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}">
<img class="contacts-list-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nadia Jolie
@ -438,7 +438,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user5-128x128.jpg' | relative_url}}">
<img class="contacts-list-img" src="{{ '/assets/img/user5-128x128.jpg' | prepend: site.baseurl }}">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nora S. Vans
@ -452,7 +452,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user6-128x128.jpg' | relative_url}}">
<img class="contacts-list-img" src="{{ '/assets/img/user6-128x128.jpg' | prepend: site.baseurl }}">
<div class="contacts-list-info">
<span class="contacts-list-name">
John K.
@ -466,7 +466,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user8-128x128.jpg' | relative_url}}">
<img class="contacts-list-img" src="{{ '/assets/img/user8-128x128.jpg' | prepend: site.baseurl }}">
<div class="contacts-list-info">
<span class="contacts-list-name">
Kenneth M.
@ -529,7 +529,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
@ -539,7 +539,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
You better believe it!
</div>
@ -549,7 +549,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
</div>
@ -559,7 +559,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
I would love to.
</div>
@ -570,7 +570,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
@ -582,7 +582,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user7-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user7-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Sarah Doe
@ -594,7 +594,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nadia Jolie
@ -606,7 +606,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user5-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user5-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nora S. Vans
@ -618,7 +618,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user6-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user6-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
John K.
@ -630,7 +630,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user8-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user8-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Kenneth M.
@ -678,7 +678,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
@ -688,7 +688,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
You better believe it!
</div>
@ -698,7 +698,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
</div>
@ -708,7 +708,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
I would love to.
</div>
@ -719,7 +719,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
@ -731,7 +731,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user7-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user7-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Sarah Doe
@ -743,7 +743,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nadia Jolie
@ -755,7 +755,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user5-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user5-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nora S. Vans
@ -767,7 +767,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user6-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user6-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
John K.
@ -779,7 +779,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user8-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user8-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Kenneth M.

View file

@ -64,7 +64,7 @@ The main header contains the navbar. Construction of the navbar differs slightly
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<img src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
@ -80,7 +80,7 @@ The main header contains the navbar. Construction of the navbar differs slightly
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{'assets/img/user8-128x128.jpg' | relative_url}}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<img src="{{ '/assets/img/user8-128x128.jpg' | prepend: site.baseurl }}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
@ -96,7 +96,7 @@ The main header contains the navbar. Construction of the navbar differs slightly
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<img src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
@ -147,12 +147,161 @@ The main header contains the navbar. Construction of the navbar differs slightly
</nav>
```html
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="#">FAQ</a>
<a class="dropdown-item" href="#">Support</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact</a>
</div>
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"><i
class="fas fa-th-large"></i></a>
</li>
</ul>
</nav>
<!-- /.navbar -->
```
{: .max-height-300}
#### Top Nav Layout. Main Header Example.
> ##### Reminder!
> To use this main header instead of the regular one, you must add the `layout-top-nav` class to the body tag.
{: .quote-orange}
Top navbar example can be found in this [demo page](https://adminlte.io/themes/dev/AdminLTE/pages/layout/top-nav.html).
<nav class="navbar navbar-expand navbar-light navbar-white">
<div class="container">
<a href="index3.html" class="navbar-brand">
<img src="{{ '/assets/img/AdminLTELogo.png' | prepend: site.baseurl }}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
@ -161,10 +310,10 @@ The main header contains the navbar. Construction of the navbar differs slightly
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">FAQ</a>
<a class="dropdown-item" href="#">Support</a>
<div class="dropdown-divider"></div>
@ -172,7 +321,6 @@ The main header contains the navbar. Construction of the navbar differs slightly
</div>
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
@ -184,13 +332,148 @@ The main header contains the navbar. Construction of the navbar differs slightly
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<i class="fas fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{ '/assets/img/user8-128x128.jpg' | prepend: site.baseurl }}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"><i
class="fas fa-th-large"></i></a>
</li>
</ul>
</div>
</nav>
```html
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-light navbar-white">
<div class="container">
<a href="index3.html" class="navbar-brand">
<img src="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>
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown4">
<a class="dropdown-item" href="#">FAQ</a>
<a class="dropdown-item" href="#">Support</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact</a>
</div>
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="fas fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
@ -277,292 +560,9 @@ The main header contains the navbar. Construction of the navbar differs slightly
class="fas fa-th-large"></i></a>
</li>
</ul>
</nav>
<!-- /.navbar -->
```
{: .max-height-300}
#### Top Nav Layout. Main Header Example.
> ##### Reminder!
> To use this main header instead of the regular one, you must add the `layout-top-nav` class to the body tag.
{: .quote-orange}
Top navbar example can be found in this [demo page](https://adminlte.io/themes/dev/AdminLTE/pages/layout/top-nav.html).
<nav class="navbar navbar-expand navbar-light navbar-white">
<div class="container">
<a href="index3.html" class="navbar-brand">
<img src="{{'assets/img/AdminLTELogo.png' | relative_url}}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">FAQ</a>
<a class="dropdown-item" href="#">Support</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact</a>
</div>
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="fas fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{'assets/img/user8-128x128.jpg' | relative_url}}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"><i
class="fas fa-th-large"></i></a>
</li>
</ul>
</div>
</nav>
```html
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-light navbar-white">
<div class="container">
<a href="index3.html" class="navbar-brand">
<img src="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>
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown4">
<a class="dropdown-item" href="#">FAQ</a>
<a class="dropdown-item" href="#">Support</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact</a>
</div>
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="fas fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"><i
class="fas fa-th-large"></i></a>
</li>
</ul>
</div>
</nav>
<!-- /.navbar -->
<!-- /.navbar -->
```
{: .max-height-300}