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
+22 -7
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;
} }
} }
+8 -5
View File
@@ -32,11 +32,14 @@
{{@site.title}} {{@site.title}}
{{/if}} {{/if}}
</a> </a>
<a class="gh-burger" role="button"> <div class="gh-head-brand-wrapper">
<div class="gh-burger-box"> <button class="gh-search" data-ghost-search>{{> "icons/search"}}</button>
<div class="gh-burger-inner"></div> <a class="gh-burger" role="button">
</div> <div class="gh-burger-box">
</a> <div class="gh-burger-inner"></div>
</div>
</a>
</div>
</div> </div>
<div class="gh-head-menu"> <div class="gh-head-menu">
{{navigation}} {{navigation}}