wordpressナビゲーションの固定方法

このQ&Aのポイント
  • wordpressナビゲーションの固定方法をご紹介します。ブラウザサイズを縮小してもメニューボタンが縦に改行しないように固定するには、特定のCSSスタイルを設定する必要があります。
  • まず、ナビゲーションメニューの要素を指定し、positionプロパティを使用して固定位置に配置します。その後、メディアクエリを使用して、特定のブラウザ幅以下での表示スタイルを変更します。
  • 具体的な方法としては、メニューボタンを囲む要素にposition: relative;を設定し、メニューボタン自体にposition: absolute;を設定します。さらに、メディアクエリを使用して、ブラウザ幅が一定以下の場合にメニューボタンを垂直方向に配置することで、固定表示を実現します。
回答を見る
  • ベストアンサー

wordpressナビゲーションの固定をしたい

wordpressテンプレートtwentytwelveを使用しています。 このナビゲーションメニュー(main-navigation)を、リキッドデザインではなく、ブラウザサイズを縮小しても、メニューボタンを縦に改行しないように固定にしたいのですが、方法がわかりません。 いろいろと方法を試したのですが、解決の糸口がつかめません。 どなたかお分かりになる方いらっしゃいますでしょうか? ----------------------------------------------- /* Assistive text */ .assistive-text, .site .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); } .main-navigation .assistive-text:focus { background: #fff; border: 2px solid #333; border-radius: 3px; clip: auto !important; color: #000; display: block; font-size: 12px; padding: 12px; position: absolute; top: 5px; left: 5px; z-index: 100000; /* Above WP toolbar */ } /* Navigation Menu */ .main-navigation { margin-top: 24px; margin-top: 1.714285714rem; text-align: center; } .main-navigation li { margin-top: 24px; margin-top: 1.714285714rem; font-size: 12px; font-size: 0.857142857rem; line-height: 1.42857143; } .main-navigation a { color: #5e5e5e; } .main-navigation a:hover { color: #21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { display: none; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle { display: inline-block; }

  • CSS
  • 回答数1
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

その部分のHTML(DOM)が分からないと・・  特に、HTMLが文書構造ではなく、このようにプレゼンテーション(デザイン)目的に書かれているとなおさらです。 ・改行させたくなければ、display:inline-block;+white-space:nowrap;、又は縫合ブロック幅を固定する。 ・ディスプレイ幅が狭くなると折り返して表示させるほうが横スクロールをしなくてすむので、ユーザーインターフェースを考慮すると良いはずですが?? ・折り返したくないときはリキッドを使ってブロック幅が全体の幅に合わせて縮小させるのがセオリーですが? clip: auto !important; なぜ!important?詳細度が0030なので要らないと思うけど?   ・・・基点となるセレクタが書かれていないので分からないけど

hobbithouse
質問者

お礼

display:inline-block;+white-space:nowrap で、思い通りの動作をさせることができました。 初心者でよくわかっていなかったので、勉強しなおします。 ありがとうございました。 助かりました。

関連するQ&A

  • Jqueryでナビゲーションを固定したい

    下記のソースで、スクロールするとナビゲーションが#menuの部分が上部に固定されるようにしたいのですがうまくいきません。 どこが間違っているのか教えて頂けると幸いです。 参考にしたサイトは http://sou-getsu.com/archives/75 こちらでこちらのソースを使うとうまく行ってくれます。 <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="css/top_style.css"> <script src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> var bt = $("#menu").offset().top; // boxのページ上からの距離を取得 var ds = 0; $(document).scroll(function(){ // スクロール発生時の処理の記述を開始 ds = $(this).scrollTop(); // ユーザのスクロールした距離を取得 if (bt <= ds) { // スクロール距離がboxの位置を超えたら、 $("#menu").addClass('fixed'); // 「follow」というclassを追加する } else if (bt >= ds) { // スクロールがページ上まで戻ったら、 $("#menu").removeClass('fixed'); // classを削除 } }); </script> <meta charset="UTF-8"> <title>無題ドキュメント</title> </head> <body> <header> <nav id="menu" class="clearfix"> <ul> <li><h1><a href="index.html"><span>株式会社DPRK</span></a></h1></li> <li class="menu01"><a href="#">ホーム<br><span>HOME</span></a></li> <li class="menu02"><a href="#">会社概要<br><span>COMOPANY</span></a></li> <li class="menu03"><a href="#">事業内容<br><span>WORKS</span></a></li> <li class="menu04"><a href="#">ニュース<br><span>NEWS</span></a></li> <li class="menu05"><a href="#">採用情報<br><span>RECRUIT</span></a></li> <li class="menu06"><a href="#">お問い合わせ<br><span>CONTACT</span></a></li> </ul> </nav> </header> </body> </html> * { margin:0 auto; padding:0; } html { height: 100%; } body { width:100%; color:#333; height:10000px; } a:hover { opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; } header { width:100%; padding-top:20px; float:left; text-align: center; } h1 { width:210px; height:60px; background-image:url("../img/logo.png"); background-repeat:no-repeat; margin-right:20px; } h1 span { display:none; } h1 a { display:block; width:210px; height:60x; } nav { height:82px; display: inline-block; } nav li { list-style:none; float:left; text-align:center; padding-top:10px; } .fixed { position: fixed; top: 0; left: 0; } nav .menu01, .menu02, .menu03, .menu04, .menu05, .menu06 { width:125px; background-color:#FFF; font-weight:bold; } nav .menu02, .menu03, .menu04, .menu05, .menu06 { border-left: solid 1px #CCC; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } nav a { width:100%; display:block; } nav span { color:#CCC; font-weight:100; line-height:3em; } nav a:link { color: #333; } nav a:visited { color: #333; } nav a:hover { color: #333; } nav a:active { color: #333; } a { text-decoration:none; } .clearfix { *zoom: 1; } .clearfix:after { content: ''; display: table; clear: both; }

    • ベストアンサー
    • HTML
  • IE6とIE7での表示の違いについて

    CSSでリストメニューを作成しています。 IE7では正常に表示できて、IE6ではリスト欄が 正常に表示できない現象に陥っており 原因はhoverにあるのではないかと、 csshover.htcをbehavior:url(csshover.htc);で取り込んでみたのですが改善されませんでした。 csshoverの絶対パスや相対パスについてはいずれも試してみたのですが やはり思うようにはいきませんでした。 下記にスタイルシート内容を添記します。 ie7では使用できて、ie6では使用できない部分など お気づきの点ありましたら、お力添え願います。 /* CSS Document */ body{ padding: 0px; } /* 背景 */ .nav-container-outer{ background: green; padding: 0px; height: 26px; background: url(images/menubg.png); } /* 幅寄せ左 */ .float-left{ float: left; } /* 幅寄せ右 */ .float-right{ float: right; } .nav-container .divider{ display:block; font-size:1px; border-width:0px; border-style:solid; } .nav-container .divider-vert{ float:left; width:0px; display: none; } .nav-container .item-secondary-title{ display:block; cursor:default; white-space:nowrap; } .clear{ font-size:1px; height:0px; width:0px; clear:left; line-height:0px; display:block; float:none; } .nav-container{ position:relative; zoom:1; margin: 0 auto; } .nav-container a, .nav-container li{ float:left; display:block; white-space:nowrap; } .nav-container div a, .nav-container ul a, .nav-container ul li{ float:none; } .nav-container ul{ left:-10000px; position:absolute; } .nav-container, .nav-container ul{ list-style:none; padding:0px; margin:0px; } .nav-container li a{ float:none } .nav-container li{ position:relative; } .nav-container ul{ z-index:10; } .nav-container ul ul{ z-index:20; } .nav-container ul ul ul{ z-index:30; } .nav-container ul ul ul ul{ z-index:40; } .nav-container ul ul ul ul ul{ z-index:50; } li:hover>ul{ left:auto; } #nav-container ul { top:100%; } #nav-container ul li:hover>ul{ top:0px; left:100%; } /* メニュー */ #nav-container a{ padding:7px 0px 5px 0px; margin: 0px 0px 0px 0px; width: 130px; color: #FFFFFF; font-size:10px; font-family: 'HG丸ゴシックM-PRO'; text-decoration: none; background: url(images/menu.png); background-repeat: no-repeat; background-position: top; font-weight: none; } /* メニュー選択時 */ #nav-container a:hover{ color: #FFFFFF; background: url(images/menu-sel.png); background-position: center; } /* サブメニュー */ #nav-container div, #nav-container ul{ padding:0px 4px 10px 0px; margin:0px 0px 0px 0px; width: 175px; background: url(images/menusub.png); background-repeat: repeat-y; background-position: -1px 1px; border-bottom: 1px solid black; } /* サブメニュー項目 */ #nav-container div a, #nav-container ul a{ padding:2px 2px 2px 2px; margin: 4px 0px 0px 0px; width: 174px; background-color: #FFFFFF; background: url(images/menusub-sel.png); background-repeat: no-repeat; background-position: 0px 22px; font-size:10px; border-width:0px; border-style:none; color: #000000; } /* サブメニュー選択時 */ #nav-container div a:hover, #nav-container ul a:hover{ background-color: #FFFFFF; background: url(images/menusub-sel.png); background-repeat: no-repeat; color: #000000; } /* サブメニュー内見出し */ #nav-container .item-secondary-title{ cursor:default; padding: 4px 0px 8px 7px; color: brue; font-family: 'HG丸ゴシックM-PRO'; font-size:10px; width: 172px; background: url(images/menusub-t.png); background-repeat: no-repeat; background-position: -1px 0px; font-weight: bold; } /* 罫線 */ #nav-container .divider-horiz{ border-top-width:1px; margin:5px 5px; border-color: #C16100; } /* メニュー項目間 境界*/ #nav-container .divider-vert{ border-left-width:1px; height:15px; margin:4px 2px 0px 2px; border-color:#AAAAAA; }

    • 締切済み
    • CSS
  • cssのみ使用したプルダウンメニュー

    はじめまして。 cssのみを使ってプルダウンするメニューを作ろうとしているのですが、上手くいきません。 コードとcssは以下です。 aboutにロールオーバーすると子孫リストがプルダウンする、というようにしたいです。 .main li .sub{ visibility:hidden; } で子孫リストは消えるものの、 .main li : hover .sub{ visibility:visible; } と設定しても現れてくれません。 どうすれば上手くいくでしょうか。 すみませんがよろしくお願いします。 ・html <nav class="common_width"> <ul class="main"> <li><a href="#">profile</a></li> <li><a href="#">about</a> <ul class="sub"> <li><a href="#">profile</a></li> <li><a href="#">blog</a></li> <li><a href="#">itai</a></li> </ul> </li> <li><a href="#">test</a></li> </ul> </nav> ・css li{ list-style:none; } .common_width{ width:900px; margin:0 auto; } a { color: #000; text-decoration: none; transition: background 0.3s ease 0s, color 0.3s ease 0s; } /*全部のリスト*/ nav li{ width:150px; } /*直下のul*/ nav > ul{ width:650px; margin:0 auto; overflow:hidden; } /*直下のリスト*/ nav .main li{ float:left; color: #9f9f9f; position: relative; margin-left:100px; } nav .main li:first-child{ border-left:none; margin-left:0px; } nav ul>li a{ padding:10px 0 10px 0 ; background-color: #ccc; display: block; text-align: center; line-height:1; } nav li:hover > a{ color: #fff; background-color: #000; } .main li .sub{ visibility:hidden; } .main li : hover .sub{ visibility:visible; } nav ul li a:hover{ color: #fff; display:block; background-color: #000; } nav .sub li { font-size: 12px; color:#fff; border-top:1px dotted #fff; text-align:center; margin-left:0px; }

    • ベストアンサー
    • HTML
  • ナビゲーションを横並びにして真ん中配置にしたい

    ナビゲーションをulタグを使って作り、横並びにしています。 さらにそれをブラウザの真ん中に配置したいのですが、真ん中になってくれません。 HTMLは以下のようにしています。 <div id="menu_top"> <ul> <li>Profile</li> <li>Information</li> <li>History</li> <li>Invitation</li> </ul> </div> CSSは以下のとおりです。 #menu_top{  margin:auto;  width:90%;  height:20px;  text-align: center; } #menu_top li{  float:left;  list-style-type:none;  margin:15px; } あとbody要素にはtext-align:centerを入れています。 現状では、ナビゲーション自体は横並びになるものの、左に寄っています。横並びのまま、真ん中に表示させるにはどのようにしたらいいでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • マージン?空白?を変えたい

    以下のコードで左右のマージン?空白?を変えたいのですが、どうすればよいのでしょうか? 現状、ヘッダのメニューを9個までは普通に設置できるのですが、10個になると二段になってしまうので、ちょっとみっともないのです。文字サイズは変更したくないです。 /* ----- header-menu (default color #f3193d) --------------------------------------------------------------------------------------------------------------------------- */ .header_menu { float:right; display:inline; margin:20px 0 0 0; height:52px; background:url(img/header_menu_right.gif) no-repeat right top; } .menu { float:left; background:url(img/header_menu_left.gif) no-repeat left top; font-size:11px; height:52px; margin:0; } .menu, .menu ul { line-height:1; margin:0; padding:0; } .menu li { position:relative; float:left; border-left:1px solid #444; height:48px; margin:2px 0 0 0; z-index:10; } .menu ul li { height:auto; border-left:none; padding:0; left:auto; margin:0; } .menu a:link, .menu a:visited { color:#999; display:block; padding:19px 30px 14px; position:relative; } .menu a:hover { color:#f3193d; text-decoration:none; background:#333; } .menu ul { position:absolute; top:48px; left:0; display:none; opacity:0; width:200px; } .menu ul ul { margin:0 0 0 189px; top:0; }

    • ベストアンサー
    • HTML
  • Wordpress カスタマイズについて

    Wordpress/Twenty Twelveカスタマイズについて Wordpressフォーラムに投稿すべきなのでしょうが、なぜか 投稿がうまくいきませんので、こちらで失礼します。 以下の内容、アドバイスを頂けると幸いです。 Wordpress/Twenty Twelveのテーマを現在カスタマイズしております。 style.css にて、メインナビゲーションメニューの各項目の後ろに、背景画像を 設定しました。ただ、それをレスポンシブル(おもにスマホ)の際は非表示と したいのですが… >PCの場合のstyle.css .main-navigation ul.nav-menu li, .main-navigation div.nav-menu > ul li { background-image: url(/メニュー背景.png); background-repeat: no-repeat; background-position: center; max-width: 100%; } >スマホの場合の縮小設定 @media screen and (min-width: 600px) { 以下に… .main-navigation ul.nav-menu li, .main-navigation div.nav-menu > ul li { background-image: url(/メニュー背景.png); background-repeat: no-repeat; background-position: center; max-width: 100%; background-img: none; } こういった記述をしておりますが、これだけではスマホで閲覧した際 非表示にならないようで、困っております…。 何かミスをしている、もしくは欠けていることがありますでしょうか。 初心者なので、記述場所等もご指摘くださると幸いです。 以上 よろしくお願いします。

  • WordPress レスポンシブテーマのCSS

    http://atsumare.wp.xdomain.jp/ 上記のURLでWordPressを使ってレスポンシブデザインの自作テーマを構築中です。 クラス「glay」でくくったボックスがスマホだと本文に食い込んでしまって困っています。 下記のものがスマホ用スタイルシートです。 /**************************************** スマホ用 ****************************************/ @media screen and (max-width:640px){ #main-1 { max-width: 100%; width: 100%; } /* ページヘッダー */ body.home header { background-size:cover; background-image:url("http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/bg.jpg"); width:100%; height:200px; } header img{ background-size:cover; display:inline-block; margin-left:auto; margin-right:auto; } h1 { position:absolute; top:0; left:0; margin-left:50px; margin-top:100px; color:#fff; font-size:24pt; } header img { background-size:cover; /* width:640px; height:200px; */ } .right-dw { display:inline-block; position:relative; width:100%; float:left; } header nav { display: none; } /* コンテンツエリア */ article { width:100%; display:block; padding-left: 5px; padding-right: 5px; box-sizing: border-box; } img { max-width:100%; height:auto; margin: 5px 5px 5px 5px; float:left; background-size:cover; } .right-dw { clear:both; display:block; position:relative; width:100%; height:auto; float:left; } .glay { border:dotted 2px #696969; display:block; color:#696969; padding:2px; margin:15px 15px 15px 15px; position:absolute; } /* フッターエリア */ footer { max-width:100%; width:500px; display:block; text-align:center; margin-left:auto; margin-right:auto; } .footer { width:130px; display:inline-block; text-align:left; color: #000; font-size: 10pt; margin-left:auto; margin-right:auto; } small { font-size:10pt; } } どなたかご教示ください。

    • 締切済み
    • CSS
  • 透明divの下に長い余白ができてしまう

    サイトを作成してるのですが透明divの下に長い余白ができてしまう【HTML・CSS】 opacityを使って背景色を透過、文字は透過しないで コンテンツを配置する方法 (http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1154742441)を 参照して組んだのですがこの透明divを閉じた後、長い空白(余白?)が 出来てしまいます。contents_area2のdivが閉じたすぐ下に ナビゲーションメニューを入れたいのですが どうすればいいのでしょうか? 見にくいですが一番下の深緑がナビゲーションメニューです 【HTML】 <!--透明ボックス--> <div id="contents"></div> <!--コンテンツ--> <div id="contents_area2"> コンテンツ~~~(フロート使ってます) <!--フロート解除--> <div id="clear"></div> </div> <!--メニュー--> <div class="nav"> <ul> <li>###</li> <li>###</li> <li>###</li> </ul> </div> 【CSS】 /* --- 透明ボックス --- */ #contents{ width: 870px; min-height:550px; margin: 5px auto 0; background-color:#FFF; opacity: 0.4; filter: alpha(opacity=40); /* IE6、IE7対応 */ -moz-opacity: 0.4; /* Firefox1.5以前対応 */ } /* --- コンテンツ --- */ #contents_area2{ position:relative; top:-550px; /*550pxできっちり合うはずなのですが5pxほどずれます */ width: 870px; min-height:550px; margin: 5px auto 0; } /* --- フロート解除 --- */ #clear { clear: both; } /* --- ナビ(メニュー) --- */ .nav{ width: 100%; background-color: #093; height: 60px; } .nav ul{ list-style:none; } .nav li{ display:inline; width:100px; font-size: 14px; font-weight: bold; color: #FFF; } DreamWeaverCS3 Windows7

    • 締切済み
    • CSS
  • CSSでボックス内の隙間が消えない

    MacのDw2004MXで、ulリストでマークアップしたナビゲーションを横に並べてa要素に背景を設定し、テキストをレフトアウトしています。 Mac上のブラウザでは問題なのですが、WinのIE6で見てみると文字サイズが最小の時以外はナビの上部に白い隙間が表示されてしまいます。もちろんpaddingもmarginも0を指定しています。隙間は文字サイズが最大のとき高さ3px、文字サイズ中のとき高さ2pxです。 しかも、a要素のfont-sizeとline-hightはpxで指定しているのでWinの文字サイズ変更は効かないはず… ulタグをdivで括り、divのpaddingもmarginも0としています。 お助けください。 ====XHTML===== <div id="nav"> <ul><li><a id="nav1" href="index.html">TOP</a></li><li><a id="nav2" href="room.html">page1</a></li><li><a id="nav3" href="price.html">page2</a></li><li><a id="nav4" href="service.html">page3</a></li><li><a id="nav5" href="meal.html">page4</a></li><li><a id="nav6" href="reserve.html">page5</a></li><li><a id="nav7" href="access.html">page6</a></li></ul> </div> ======CSS===== #nav{ width:705px; height:30px; margin:0; padding:0; } #nav ul{ list-style-type:none; margin:0; padding:0; height:30px; } #nav ul li{ display:inline height:30px; margin:0; padding:0; height:30px; } #nav ul li a{ display:block; margin:0; font-size:6px; height:30px; float:left; background:url(../i/g/nav.gif) no-repeat 0 0; text-indent:-5000px; line-height:10px; }

  • CSSで、指定されていない空白が開く

    ヘッダーのロゴとその下のナビゲーションの間に、勝手に空白が空きます。 margin: 0;と設定しても空白が空きます。 section#header { width:80%; height: 63px; margin-right: auto; margin-left: auto; } img.LOGO { width: 700px; height: 63px; float: left; } p.intro { color: #383838; float: right; font-size: 120%; } section#links { font-size: 130%; width: 90%; height: 40px; margin-bottom: 40px; margin-right: auto; margin-left : auto; } nav ul li { display: block; float: left; width: 18%; height: 40px; margin-left: 1px; margin-right: 1px; border-left: #000000 2px solid; border-right: #000000 2px solid; } nav ul li a { display: block; line-height: 40px; width: 100%; height: 100%; text-decoration: none; text-align: center; } div#clear { clear:both; } CSSは以上の通り書きました。 このとき、section#headerで設定した、img#LOGOとp.introを含むヘッダー部分と、 section#linksで設定したナビゲーション部分に間が空いてしまいます。 どうすれば開かなくなるでしょうか。 閲覧環境はChromeです。

    • ベストアンサー
    • CSS