|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- start global nav --> <!----> <?php if( has_nav_menu( 'global_nav' ) ){ ?> <nav id="gnav" role="navigation" itemscope="itemscope" itemtype="http://scheme.org/SiteNavigationElement"> <div class="wrap"> <?php wp_nav_menu( array( ‥ 省 略 ‥ ));?> <div id="my-searchform"> <form role="search" method="get" action="https://yellowitch.whoa.jp/template/"> <input type="text" value="<?php echo get_search_query() ?>" name="s"> <button type="submit"><i class="fa fa-search"></i></button> </form> </div> </div> </nav> <?php } ?> |
|
1 2 3 4 5 6 7 8 9 10 |
/** == ナビゲーションメニューの検索ボックス =========== **/ #gnav .wrap { display: flex; justify-content: flex-end; align-items: center; min-height: 100px; } @media screen and (max-width: 991px){ #gnav .wrap { flex-flow: column; align-items: stretch; } } |
検索ボタンをパディング２０px無しでマージン-50pxすると落ちちゃうから不思議。
CSSのhas()疑似クラス関数の使い方
フォーカスでクラス追加、するスクリプト
https://elearn.jp/wpman/function/wp_nav_menu.html
https://ja.stackanswer.site/wordpress/2143-customizing-only-a-specific-menu-using-the-wp-nav-menu-items-hook