サポート » プラグイン » グローバルメニューのレスポンシブについて

  • 解決済 hachikuma

    (@hachikuma)


    グローバルメニュー(ハンバーガーメニュー)の出現widthを変更したいのですが
    どうしたらいいでしょうか?
    cssだけだと表示だけで、起動ができませんでした。

    どうぞよろしくお願いいたします。

    テーマはシドニーです。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • こんにちは

    「出現width」とは、ハンバーガーメニューボタンのサイズということでしょうか?
    この場合は、下記のような CSS で変更できます。

    カスタマイズの [追加 CSS] などに、

    .btn-menu {
    	width: 48px; /* 28px */
    	height: 48px; /* 28px */
    }
    .btn-menu .sydney-svg-icon {
    	width: 42px; /* 22px */
    }

    ishitakaさん、ご回答ありがとうございます。

    ボタンのサイズではなくて、ボタンが出現する画面サイズのことです。
    現状
    @media only screen and (max-width: 1024px) {
    で起動するのですが、1173pxで起動してほしいのです。

    どうぞよろしくお願いいたします。

    下記コードではどうでどうでしょう?

    子テーマの functions.php に、

    function my_enqueue_scripts() {
    	$script = <<<'SCRIPT'
    (function($) {
    	var responsiveMenu = function() {
    		var	menuType = 'desktop';
    
    		$(window).on('load resize', function() {
    			var currMenuType = 'desktop';
    
    			if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
    				menuType = 'mobile';
    				return;
    			}
    
    			if ( matchMedia( 'only screen and (min-width: 1025px) and (max-width: 1173px)' ).matches ) {
    				currMenuType = 'tablet';
    			}
    
    			if ( currMenuType !== menuType ) {
    				menuType = currMenuType;
    
    				if ( currMenuType === 'tablet' ) {
    					var $mobileMenu = $('#mainnav').attr('id', 'mainnav-mobi').hide();
    					var hasChildMenu = $('#mainnav-mobi').find('li:has(ul)');
    
    					$('#header').find('.header-wrap').after($mobileMenu);
    					hasChildMenu.children('ul').hide();
    					var svgSubmenu = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"/></svg>';
    					hasChildMenu.children('a').after('<span class="btn-submenu">' + svgSubmenu + '</span>');
    					$('.btn-menu').removeClass('active');
    				} else {
    					var $desktopMenu = $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style');
    
    					$desktopMenu.find('.submenu').removeAttr('style');
    					$('#header').find('.col-md-10').append($desktopMenu);
    					$('.btn-submenu').remove();
    				}
    			}
    		});
    	}
    
    	$(function() {
    		responsiveMenu();
       	});
    })(jQuery);
    SCRIPT;
    
    	wp_add_inline_script( 'sydney-main', $script, 'after' );
    }
    add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts', 11 );

    ishitakaさん

    ご回答ありがとうございます。
    ご提案通りにしてみましたところ、
    1025px~1173pxの間は、メニューが消えるのですが、
    グローバルメニューのボタンが出てこない状態でした。

    もちろん、1024pxになればグローバルメニューのボタンが出てきます。

    どうぞよろしくお願いいたします。

    CSS も変更する必要があります。

    例:

    @media only screen and (max-width: 1173px) {
    	.site-header.fixed {
    		position: static !important;
    	}
    	.slides-container .slide-item,
    	.panel-row-style {
    		background-attachment: scroll !important;
    		background-position: center !important;
    	}
    	.panel-row-style.mob-pad-0 {
    		padding: 0 !important;
    	}
    	.panel-row-style.mob-pad-15 {
    		padding: 15px 0 !important;
    	}
    	.panel-row-style.mob-pad-30 {
    		padding: 30px 0 !important;
    	}
    	.panel-row-style.mob-pad-45 {
    		padding: 45px 0 !important;
    	}
    	.site-header {
    		position: static;
    		background-color: rgba(0,0,0,0.9);
    	}
    	.header-clone {
    		display: none;
    	}
    	.posts-navigation {
    		overflow: hidden;
    		margin-bottom: 30px;
    	}
    	#mainnav {
    		display: none;
    	}
    	.btn-menu {
    		display: block;
    	}
    }

    ishitakaさん!

    うまくいきました!!
    いつもありがとうございます。
    感謝申し上げます!!

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。