サポート » 使い方全般 » スマホでのロゴとメニューの位置について

  • 質問失礼致します。
    Sydneyというテーマでサイトを作っており、スマホでの表示についてです。

    デフォルトでサイトロゴが中央寄せ、その下にハンバーガーメニューが表示されておりますが、サイトロゴを左寄せにしてメニューを並列の右に位置したいと考えております。

    メニューの右寄せは
    #mainnav {
    display: block;
    float: right;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    }

    にて行うことができましたが、ロゴとの横並びに苦戦しております。

    ご教授のほど、何卒宜しくお願い申し上げます。

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

    Sydney テーマは、Bootstrap という CSS フレームワークを使用しています。
    該当箇所は、この Bootstrap のグリッド・システムを利用しています。
    Bootstrap のグリッド・システムについては、下記のページ等を参照してみてください。
    https://getbootstrap.com/docs/3.3/css/
    http://bootstrap3.cyberlab.info/css/gridSystem.html

    下記は、header.php を抜粋したものです。

    <header id="masthead" class="site-header" role="banner">
    	<div class="header-wrap">
    		<div class="container">
    			<div class="row">
    				<div class="col-md-4 col-sm-8 col-xs-12">
    				</div>
    				<div class="col-md-8 col-sm-4 col-xs-12">
    				</div>
    			</div>
    		</div>
    	</div>
    </header><!-- #masthead -->

    Bootstrap のグリッド・システムでは、横幅を 12 等分したカラムで構成されています。
    col-xs-12 クラスは、12 カラム(つまり横幅いっぱい)を振り分けするということです。これを、10 カラム(col-xs-10)と 2 カラム(col-xs-2)のように振り分けることで 2 列のグリッドにすることができます。

    <header id="masthead" class="site-header" role="banner">
    	<div class="header-wrap">
    		<div class="container">
    			<div class="row">
    				<div class="col-md-4 col-sm-8 col-xs-10">
    				</div>
    				<div class="col-md-8 col-sm-4 col-xs-2">
    				</div>
    			</div>
    		</div>
    	</div>
    </header><!-- #masthead -->
    • この返信は4年、 11ヶ月前にishitakaが編集しました。
    トピック投稿者 sugu1218

    (@sugu1218)

    ご返信ありがとうございました!
    教えていただいた方法で試したところ、無事に横並びに表示できるようになりました!

    ただ、その影響でメニューをクリックした際に詳細が下に表示されたままのため、メニュー内容がページの外に表示されてしまうようになってしまいました。

    そのため、表示した際に全画面表示にして対応したいと思うのですが、.btn-menuをいじるような形となりますでしょうか。
    以下の記事を参考にしてみようかとは思っております。
    https://theorthodoxworks.com/web-design/modal-window-menu-jquery-css/

    また、メニュー内に閉じるボタンが無いためそちらも作成しようと思いますが、上記の内容で宜しいでしょうか。

    度々のご質問にて恐縮でございます。

    下記スタイルを追加するとメニュー(ドロップダウン)が表示されるようになると思います。

    style.css 又はカスタム CSS 等に、

    @media only screen and (max-width: 767px) {
    	#mainnav-mobi {
    		left: -100%;
    		width: auto;
    	}
    }

    そのため、表示した際に全画面表示にして対応したいと思うのですが、.btn-menuをいじるような形となりますでしょうか。

    及び

    また、メニュー内に閉じるボタンが無いためそちらも作成しようと思いますが、上記の内容で宜しいでしょうか。

    このテーマのメニュー構成とは大きく異なるので、一から作成したほうがいいかな(提示されたページを参考に)と思います。

    • この返信は4年、 11ヶ月前にishitakaが編集しました。
    トピック投稿者 sugu1218

    (@sugu1218)

    ありがとうございます!
    承知致しました。

    関連性のない質問の場合には別で作成するようにさせていただきます。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「スマホでのロゴとメニューの位置について」には新たに返信することはできません。