提交 a3362afd 编写于 作者: C codecalm

header top nav toggler

上级 5e8e7b07
{% assign user = site.data.users[40] %}
<div class="header">
<div class="header py-lg-4">
<div class="container">
<div class="d-flex">
<a class="navbar-brand" href="{{ site.base }}/index.html">
<img src="{{ site.base }}/demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
<a class="header-brand" href="{{ site.base }}/index.html">
<img src="{{ site.base }}/demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
</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">
<a href="{{ site.github_url }}" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
</div>
......@@ -71,16 +72,17 @@
</a>
</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>
<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 class="header p-0">
<div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-3 ml-auto">
......
.header {
padding-top: 1rem;
padding-bottom: 1rem;
//height: $header-height;
padding-top: .75rem;
padding-bottom: .75rem;
background: #fff;
border-bottom: 1px solid $border-color;
......@@ -32,7 +31,7 @@
border-radius: 50%;
}
.navbar-brand {
.header-brand {
color: inherit;
margin-right: 1rem;
font-size: 1.25rem;
......@@ -49,7 +48,7 @@
}
}
.navbar-brand-img {
.header-brand-img {
height: 2rem;
line-height: 2rem;
vertical-align: bottom;
......@@ -65,26 +64,6 @@
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 {
// background: #fff;
// border-bottom: 1px solid $border-color;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册