サポート » テーマ » モバイル表示のハンバーガーメニューを解除したい

  • スマホ・モバイル表示、又は画面を小さくした時にトップメニューがハンバーガーメニューの形で小さく畳まれるのを解除したいです
    つまりは、モバイルで表示した時にヘッダーの下のトップメニューが横スクロール、又はレンガのようにタイトル文字のボタンが表示されるようにしたいです

    御一考よろしくお願いします。

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

    お使いのテーマは何かを教えていただけますか。

    「Twenty Fourteen」です
    よろしくおねがいします

    Twenty Fourteen テーマですか・・・。
    なかなか厄介ですね。とりあえず、下記スタイルでデスクトップの画面(783px 以上)と同じ表示・動作にはなると思います。同じ動作なので、メニューの副項目はタッチデバイスでは選択できないという制限があります。

    テーマの style.css またはカスタマイズの [追加 CSS] などに、

    /* Primary Navigation */
    
    .primary-navigation {
    	float: right;
    	font-size: 11px;
    	margin: 0 1px 0 -12px;
    	padding: 0;
    	text-transform: uppercase;
    }
    
    .primary-navigation .menu-toggle {
    	display: none;
    	padding: 0;
    }
    
    .primary-navigation .nav-menu {
    	border-bottom: 0;
    	display: block;
    }
    
    .primary-navigation.toggled-on {
    	border-bottom: 0;
    	margin: 0;
    	padding: 0;
    }
    
    .primary-navigation li {
    	border: 0;
    	display: inline-block;
    	height: 48px;
    	line-height: 48px;
    	position: relative;
    }
    
    .primary-navigation a {
    	display: inline-block;
    	padding: 0 12px;
    	white-space: nowrap;
    }
    
    .primary-navigation ul ul {
    	background-color: #24890d;
    	float: left;
    	margin: 0;
    	position: absolute;
    	top: 48px;
    	left: -999em;
    	z-index: 99999;
    }
    
    .primary-navigation li li {
    	border: 0;
    	display: block;
    	height: auto;
    	line-height: 1.0909090909;
    }
    
    .primary-navigation ul ul ul {
    	left: -999em;
    	top: 0;
    }
    
    .primary-navigation ul ul a {
    	padding: 18px 12px;
    	white-space: normal;
    	width: 176px;
    }
    
    .primary-navigation li:hover > a,
    .primary-navigation li.focus > a {
    	background-color: #24890d;
    	color: #fff;
    }
    
    .primary-navigation ul ul a:hover,
    .primary-navigation ul ul li.focus > a {
    	background-color: #41a62a;
    }
    
    .primary-navigation ul li:hover > ul,
    .primary-navigation ul li.focus > ul {
    	left: auto;
    }
    
    .primary-navigation ul ul li:hover > ul,
    .primary-navigation ul ul li.focus > ul {
    	left: 100%;
    }
    
    .primary-navigation .menu-item-has-children > a,
    .primary-navigation .page_item_has_children > a {
    	padding-right: 26px;
    }
    
    .primary-navigation .menu-item-has-children > a:after,
    .primary-navigation .page_item_has_children > a:after {
    	-webkit-font-smoothing: antialiased;
    	content: "\f502";
    	display: inline-block;
    	font: normal 8px/1 Genericons;
    	position: absolute;
    	right: 12px;
    	top: 22px;
    	vertical-align: text-bottom;
    }
    
    .primary-navigation li .menu-item-has-children > a,
    .primary-navigation li .page_item_has_children > a {
    	padding-right: 20px;
    	width: 168px;
    }
    
    .primary-navigation .menu-item-has-children li.menu-item-has-children > a:after,
    .primary-navigation .menu-item-has-children li.page_item_has_children > a:after,
    .primary-navigation .page_item_has_children li.menu-item-has-children > a:after,
    .primary-navigation .page_item_has_children li.page_item_has_children > a:after {
    	content: "\f501";
    	right: 8px;
    	top: 20px;
    }
    
    /* Search in the header */
    
    @media screen and (max-width: 672px) {
    	.search-toggle {
    		margin-right: -10px;
    	}
    }
    
    @media screen and (min-width: 673px) {
    	.search-toggle {
    		margin-right: -30px;
    	}
    }
    
    @media screen and (min-width: 783px) {
    	.search-toggle {
    		margin-right: 0;
    	}
    }

    返信ありがとうございます!
    動作して解決しました
    あーなるほど、カーソルを合わせている間しか開かないわけですね…

    やっぱり厄介なテーマなんですね…
    デザインがこれに近いもので、有用なテーマがあったりするものなんでしょうか
    よければ教えて頂きたいです

    CG

    (@du-bist-der-lenz)

    スマホ・モバイルを判定して、テーマをスイッチするであるとか、メディアクエリで、スマホ・モバイルサイズの時には、別のメニューを表示させるのも手段でしょう。

    デザインがこれに近いもので、有用なテーマがあったりするものなんでしょうかよければ教えて頂きたいです

    私は、標準のテーマ(Twenty シリーズ)以外はほとんど使用したことがないので、おすすめできるテーマは特にありません。好みもあるので実際にご自身で試してみて自分に合うものを選ぶといいかと思います。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「モバイル表示のハンバーガーメニューを解除したい」には新たに返信することはできません。