Q&A
前提・実現したいこと
WordPressのMarinateというテーマを使っています。
ヘッダ部分に表示されているメニューについて、レスポンシブ対応を無効にしたいです。
Bootstrapを使っているようで、色々と試行錯誤してみましたが画面を小さくするとハンバーガーメニューに組み込まれてしまいます。
WordPress、HTML、CSS全てにおいて初心者なので試行錯誤している内容自体無駄なことなのかもしれないのですが、他に対応方法が調べてもわからず、恐れ入りますがご教示いただけないでしょうか。
テーマは以下からダウンロードしました
https://ja.wordpress.org/themes/marinate/
発生している問題・エラーメッセージ
ブラウザの画面を小さくするとヘッダメニュー（ナビゲーションメニュー）が消えてしまう
（左上のハンバーガーメニューに組み込まれてしまう）
該当のソースコード
CSS
1/* Small menu. */ 2 3.menu-toggle, 4.main-navigation.toggled ul { 5 display: block; 6} 7 8/*@media screen and (min-width: 37.5em) { 9 * 画面サイズが37.5emからはここを読み込む */ 10 .menu-toggle { 11 display: none; 12 } 13 14 .main-navigation ul { 15 display: block; 16 } 17
php
1<!--header.phpです--> 2 <header class="site-header" id="masthead"> 3 <div class="container"> 4 5 <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1 pushmenu push"> 6 <a id="marinate-navbtn" class="menu-btn"><span><span class="screen-reader-text"><?php esc_html_e( 'Open Sidebar', 'marinate' ); ?></span></span></a> 7 </div> 8 9 <div class="site-branding col-lg-7 col-md-7 col-sm-10 col-xs-10"> 10 <?php the_custom_logo(); ?> 11 <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> 12 <?php 13 $description = get_bloginfo( 'description', 'display' ); 14 if ( $description || is_customize_preview() ) : ?> 15 <p class="site-description"><?php echo esc_html( $description ); // phpcs:ignore WordPress.Security.EscapeOutput.DeprecatedWhitelistCommentFound ?></p> 16 <?php endif; ?> 17 </div> 18 19 <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 hidden-xs hidden-sm"> 20 21 <?php 22 $socialheader = get_theme_mod('marinate_social_ed', '0'); 23 $fb = get_theme_mod('marinate_button_url_fb'); 24 $tw = get_theme_mod('marinate_button_url_tw'); 25 $pin = get_theme_mod('marinate_button_url_pin'); 26 $insta = get_theme_mod('marinate_button_url_ins'); 27 $gplus = get_theme_mod('marinate_button_url_gp'); 28 if ($socialheader) { 29 ?> 30 <ul class="social-networks"> 31 <?php if ($fb) { ?><li><a class="facebook" href="<?php echo esc_url($fb); ?>"><i class="fa fa-facebook"></i></a></li><?php } ?> 32 <?php if ($tw) { ?><li><a class="twitter" href="<?php echo esc_url($tw); ?>"><i class="fa fa-twitter"></i></a></li><?php } ?> 33 <?php if ($pin) { ?><li><a class="pinterest" href="<?php echo esc_url($pin); ?>"><i class="fa fa-pinterest-p"></i></a></li><?php } ?> 34 <?php if ($insta) { ?><li><a class="instagram" href="<?php echo esc_url($insta); ?>"><i class="fa fa-instagram"></i></a></li><?php } ?> 35 <?php if ($gplus) { ?><li><a class="google-plus" href="<?php echo esc_url($gplus); ?>"><i class="fa fa-google-plus"></i></a></li><?php } ?> 36 </ul> 37 <?php 38 } 39 ?> 40 41 42 </div> 43 </div> 44 <div class="clearfix"></div> 45<!-- <nav class="navbar navbar-default navbar-fixed-top"> 46 <div class="container-fluid">--> 47 <nav class="navbar navbar-default main-navigation hidden-xs hidden-sm" id="site-navigation"> 48 <div class="container"> 49 50 <!-- Brand and toggle get grouped for better mobile display --> 51 <div class="navbar-header"> 52 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 53 <span class="sr-only"><?php echo esc_html('Toggle navigation', 'marinate') ?></span> 54 <span class="icon-bar"></span> 55 <span class="icon-bar"></span> 56 <span class="icon-bar"></span> 57 </button> 58 </div> 59 60 <!-- Collect the nav links, forms, and other content for toggling --> 61 <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1"> 62 <?php 63 wp_nav_menu( array( 64 'theme_location' => 'menu-1', 65 'menu_id' => 'primary-menu', 66 'container' => 'ul', 67 'fallback_cb' => 'wp_page_menu', 68 'menu_class' => 'nav navbar-nav main-nav', 69 'item_wrap' => '<ul class="%2$s">%3s</ul>', 70 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 71 'walker' => new WP_Bootstrap_Navwalker(), 72 ) ); 73 ?> 74 </div> 75 <!-- /.navbar-collapse --> 76 </div> 77 </nav> 78 <!-- /.container --> 79 </header>
試したこと
①Style.cssで以下をコメントアウト
/*@media screen and (min-width: 37.5em) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: block;
}
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
margin: 0 0 1.5em;
overflow: hidden;
}
②WordPressの追加CSSに以下を記載
.navbar navbar-default main-navigation hidden-xs hidden-sm
{
position: fixed;
}
.navbar-header {
position:fixed;
}
.header {
position:fixed;
}
③header.phpで以下のように変更
<!-- <nav class="navbar navbar-default main-navigation hidden-xs hidden-sm" id="site-navigation"> <div class="container"> をコメントアウトして以下に変更 <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> 参考にしたURL：http://bootstrap3.cyberlab.info/components/navbar.html#usage8 ### 補足情報（FW/ツールのバージョンなど） WordPress 5.4.2 Marinateテーマ使用
回答1件
0
ベストアンサー
WordPress、Marinateテーマで確認してないですが、
Bootstrap3の場合
hidden-xs hidden-smを消すと非表示にならず、
Bootstrap4の場合
d-blockを付けると表示されます。
投稿2020/08/20 04:51
編集2020/08/20 04:52
総合スコア955
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/20 05:00 編集
2020/08/20 05:09 編集
2020/08/20 05:22