提交 a3362afd 编写于 作者: C codecalm

header top nav toggler

上级 5e8e7b07
{% assign user = site.data.users[40] %} {% assign user = site.data.users[40] %}
<div class="header"> <div class="header py-lg-4">
<div class="container"> <div class="container">
<div class="d-flex"> <div class="d-flex">
<a class="navbar-brand" href="{{ site.base }}/index.html"> <a class="header-brand" href="{{ site.base }}/index.html">
<img src="{{ site.base }}/demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io"> <img src="{{ site.base }}/demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
</a> </a>
<div class="ml-auto d-flex order-lg-2">
<div class="d-flex order-lg-2 ml-auto">
<div class="nav-item d-none d-md-flex"> <div class="nav-item d-none d-md-flex">
<a href="{{ site.github_url }}" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a> <a href="{{ site.github_url }}" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
</div> </div>
...@@ -71,16 +72,17 @@ ...@@ -71,16 +72,17 @@
</a> </a>
</div> </div>
</div> </div>
<div class="nav-item d-flex d-md-none">
<a href="#" class="nav-link icon"><i class="fe fe-menu"></i></a>
</div>
</div> </div>
<a class="header-toggler d-lg-none" data-toggle="collapse" data-target="#headerMenuCollapse">
<span class="header-toggler-icon"></span>
zzz
</a>
</div> </div>
</div> </div>
</div> </div>
<div class="header p-0"> <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
<div class="container"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-lg-3 ml-auto"> <div class="col-lg-3 ml-auto">
......
.header { .header {
padding-top: 1rem; padding-top: .75rem;
padding-bottom: 1rem; padding-bottom: .75rem;
//height: $header-height;
background: #fff; background: #fff;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
...@@ -32,7 +31,7 @@ ...@@ -32,7 +31,7 @@
border-radius: 50%; border-radius: 50%;
} }
.navbar-brand { .header-brand {
color: inherit; color: inherit;
margin-right: 1rem; margin-right: 1rem;
font-size: 1.25rem; font-size: 1.25rem;
...@@ -49,7 +48,7 @@ ...@@ -49,7 +48,7 @@
} }
} }
.navbar-brand-img { .header-brand-img {
height: 2rem; height: 2rem;
line-height: 2rem; line-height: 2rem;
vertical-align: bottom; vertical-align: bottom;
...@@ -65,26 +64,6 @@ ...@@ -65,26 +64,6 @@
border-radius: 50%; border-radius: 50%;
} }
.header-overlay {
position: fixed;
top: $header-height;
right: 0;
bottom: 0;
left: 0;
background: rgba(26,54,80,0.1);
visibility: hidden;
opacity: 0;
z-index: $zindex-overlay;
transition: .6s opacity, .6s visibility;
backdrop-filter: blur(1px);
.dropdown-menu.show + & {
visibility: visible;
opacity: 1;
}
}
//.header-nav { //.header-nav {
// background: #fff; // background: #fff;
// border-bottom: 1px solid $border-color; // border-bottom: 1px solid $border-color;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册