モバイル表示のハンバーガーメニューを解除したい
-
スマホ・モバイル表示、又は画面を小さくした時にトップメニューがハンバーガーメニューの形で小さく畳まれるのを解除したいです
つまりは、モバイルで表示した時にヘッダーの下のトップメニューが横スクロール、又はレンガのようにタイトル文字のボタンが表示されるようにしたいです御一考よろしくお願いします。
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; } }
返信ありがとうございます!
動作して解決しました
あーなるほど、カーソルを合わせている間しか開かないわけですね…やっぱり厄介なテーマなんですね…
デザインがこれに近いもので、有用なテーマがあったりするものなんでしょうか
よければ教えて頂きたいですスマホ・モバイルを判定して、テーマをスイッチするであるとか、メディアクエリで、スマホ・モバイルサイズの時には、別のメニューを表示させるのも手段でしょう。
6件の返信を表示中 - 1 - 6件目 (全6件中)
- トピック「モバイル表示のハンバーガーメニューを解除したい」には新たに返信することはできません。