Fix search icon spacing

This commit is contained in:
Sodbileg Gansukh 2022-07-14 15:16:32 +08:00
parent d373d926fa
commit ffcbc42d13
4 changed files with 32 additions and 14 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -224,7 +224,6 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
@media (max-width: 767px) { @media (max-width: 767px) {
.has-cover .site-header-content { .has-cover .site-header-content {
padding-bottom: 36px;
min-height: 240px; min-height: 240px;
} }
.site-header-inner { .site-header-inner {
@ -321,6 +320,11 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
max-height: 26px; max-height: 26px;
} }
.gh-head-brand-wrapper {
display: flex;
align-items: center;
}
/* Primary Navigation /* Primary Navigation
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@ -368,7 +372,7 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
.gh-social { .gh-social {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 20px;
} }
.gh-social-link { .gh-social-link {
@ -433,12 +437,23 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
opacity: 0.9; opacity: 0.9;
} }
.gh-head-brand .gh-search {
margin-right: 8px;
}
.gh-head-actions .gh-search {
margin-right: -10px;
}
@media (max-width: 991px) { @media (max-width: 991px) {
.gh-search { .gh-head-actions .gh-search {
position: fixed; display: none;
top: 16px; }
left: 16px; }
z-index: 10;
@media (min-width: 992px) {
.gh-head-brand .gh-search {
display: none;
} }
} }

View File

@ -32,12 +32,15 @@
{{@site.title}} {{@site.title}}
{{/if}} {{/if}}
</a> </a>
<div class="gh-head-brand-wrapper">
<button class="gh-search" data-ghost-search>{{> "icons/search"}}</button>
<a class="gh-burger" role="button"> <a class="gh-burger" role="button">
<div class="gh-burger-box"> <div class="gh-burger-box">
<div class="gh-burger-inner"></div> <div class="gh-burger-inner"></div>
</div> </div>
</a> </a>
</div> </div>
</div>
<div class="gh-head-menu"> <div class="gh-head-menu">
{{navigation}} {{navigation}}
</div> </div>