AlxMedia/magaziner
1
0
Fork 0
mirror of https://ghproxy.net/https://github.com/AlxMedia/magaziner.git synced 2025-08-27 23:08:41 +08:00
Code Issues Projects Packages Wiki Activity Actions

Add search button to mobile header menu

Browse source
This commit is contained in:
Alexander Agnarson 2020-12-05 12:31:16 +01:00
parent 7beeddf43b
commit beb3ff551d
2 changed files with 15 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

25
header.php
View file

@ -85,18 +85,19 @@
<?php if ( has_nav_menu('header') ): ?> <?php if ( has_nav_menu('header') ): ?>
<div id="wrap-nav-header" class="wrap-nav"> <div id="wrap-nav-header" class="wrap-nav">
<?php \AlxMedia\Nav::nav_menu(array('theme_location'=>'header','menu_id' => 'nav-header','fallback_cb'=> false)); ?> <?php \AlxMedia\Nav::nav_menu(array('theme_location'=>'header','menu_id' => 'nav-header','fallback_cb'=> false)); ?>
</div>
<?php endif; ?> <?php if ( get_theme_mod( 'header-search', 'on' ) == 'on' ): ?>
<button class="toggle-search">
<?php if ( get_theme_mod( 'header-search', 'on' ) == 'on' ): ?> <svg class="svg-icon" id="svg-search" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23"><path d="M38.710696,48.0601792 L43,52.3494831 L41.3494831,54 L37.0601792,49.710696 C35.2632422,51.1481185 32.9839107,52.0076499 30.5038249,52.0076499 C24.7027226,52.0076499 20,47.3049272 20,41.5038249 C20,35.7027226 24.7027226,31 30.5038249,31 C36.3049272,31 41.0076499,35.7027226 41.0076499,41.5038249 C41.0076499,43.9839107 40.1481185,46.2632422 38.710696,48.0601792 Z M36.3875844,47.1716785 C37.8030221,45.7026647 38.6734666,43.7048964 38.6734666,41.5038249 C38.6734666,36.9918565 35.0157934,33.3341833 30.5038249,33.3341833 C25.9918565,33.3341833 22.3341833,36.9918565 22.3341833,41.5038249 C22.3341833,46.0157934 25.9918565,49.6734666 30.5038249,49.6734666 C32.7048964,49.6734666 34.7026647,48.8030221 36.1716785,47.3875844 C36.2023931,47.347638 36.2360451,47.3092237 36.2726343,47.2726343 C36.3092237,47.2360451 36.347638,47.2023931 36.3875844,47.1716785 Z" transform="translate(-20 -31)"></path></svg>
<button class="toggle-search"> <svg class="svg-icon" id="svg-close" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 16 16"><polygon fill="" fill-rule="evenodd" points="6.852 7.649 .399 1.195 1.445 .149 7.899 6.602 14.352 .149 15.399 1.195 8.945 7.649 15.399 14.102 14.352 15.149 7.899 8.695 1.445 15.149 .399 14.102"></polygon></svg>
<svg class="svg-icon" id="svg-search" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23"><path d="M38.710696,48.0601792 L43,52.3494831 L41.3494831,54 L37.0601792,49.710696 C35.2632422,51.1481185 32.9839107,52.0076499 30.5038249,52.0076499 C24.7027226,52.0076499 20,47.3049272 20,41.5038249 C20,35.7027226 24.7027226,31 30.5038249,31 C36.3049272,31 41.0076499,35.7027226 41.0076499,41.5038249 C41.0076499,43.9839107 40.1481185,46.2632422 38.710696,48.0601792 Z M36.3875844,47.1716785 C37.8030221,45.7026647 38.6734666,43.7048964 38.6734666,41.5038249 C38.6734666,36.9918565 35.0157934,33.3341833 30.5038249,33.3341833 C25.9918565,33.3341833 22.3341833,36.9918565 22.3341833,41.5038249 C22.3341833,46.0157934 25.9918565,49.6734666 30.5038249,49.6734666 C32.7048964,49.6734666 34.7026647,48.8030221 36.1716785,47.3875844 C36.2023931,47.347638 36.2360451,47.3092237 36.2726343,47.2726343 C36.3092237,47.2360451 36.347638,47.2023931 36.3875844,47.1716785 Z" transform="translate(-20 -31)"></path></svg> </button>
<svg class="svg-icon" id="svg-close" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 16 16"><polygon fill="" fill-rule="evenodd" points="6.852 7.649 .399 1.195 1.445 .149 7.899 6.602 14.352 .149 15.399 1.195 8.945 7.649 15.399 14.102 14.352 15.149 7.899 8.695 1.445 15.149 .399 14.102"></polygon></svg> <div class="search-expand">
</button> <div class="search-expand-inner">
<div class="search-expand"> <?php get_search_form(); ?>
<div class="search-expand-inner"> </div>
<?php get_search_form(); ?> </div>
</div> <?php endif; ?>
</div> </div>
<?php endif; ?> <?php endif; ?>

4
responsive.css
View file

@ -160,8 +160,8 @@
#header .pad { padding: 0; } #header .pad { padding: 0; }
.site-title { width: 100%; float: none; } .site-title { width: 100%; float: none; }
.site-title a { text-align: center; } .site-title a { text-align: center; }
.header-menu .toggle-search { display: none; } .header-menu .toggle-search { left: 15px; top: 2px; right: auto; }
.search-expand { width: 100%; margin-right: -30px; top: -1px; } .search-expand { width: auto; top: 2px; left: 80px; right: 70px; }
#header-middle .social-links { float: none; position: static; padding: 0 0 20px; margin: 0; text-align: center; width: 100%; } #header-middle .social-links { float: none; position: static; padding: 0 0 20px; margin: 0; text-align: center; width: 100%; }
#header-middle .social-links li { margin: 0 4px; } #header-middle .social-links li { margin: 0 4px; }
#header-middle .social-links .social-tooltip { font-size: 18px; } #header-middle .social-links .social-tooltip { font-size: 18px; }