github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

overhauled top-nav layout with a collapsable menu

pull/2303/head
REJack 2019-10-03 14:34:22 +02:00
parent 99e51bc31a
commit c011e42b77
No known key found for this signature in database
GPG Key ID: 9F3976CC630CC888
2 changed files with 65 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
build/scss/_navs.scss
View File

@ -63,6 +63,15 @@
}
}
.navbar-no-expand {
flex-direction: row;
.nav-link {
padding-left: $navbar-nav-link-padding-x;
padding-right: $navbar-nav-link-padding-x;
}
}
// Color variants
@each $color, $value in $theme-colors {
@if $color == dark or $color == light {

16
pages/layout/top-nav.html
View File

@ -22,7 +22,7 @@ scratch. This page gets rid of all links and provides the needed markup only.
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-light navbar-white">
<nav class="main-header navbar navbar-expand-md 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"
@ -30,14 +30,17 @@ scratch. This page gets rid of all links and provides the needed markup only.
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<button class="navbar-toggler order-1" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse order-3" id="navbarCollapse">
<!-- 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">
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item dropdown">
@ -76,7 +79,7 @@ scratch. This page gets rid of all links and provides the needed markup only.
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<form class="form-inline ml-0 ml-md-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">
@ -86,9 +89,10 @@ scratch. This page gets rid of all links and provides the needed markup only.
</div>
</div>
</form>
</div>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<ul class="order-1 order-md-3 navbar-nav navbar-no-expand ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">