スマホでのロゴとメニューの位置について

こんにちは

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 -->

• この返信は6年、 7ヶ月前にishitakaが編集しました。

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

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

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

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

及び

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

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

• この返信は6年、 7ヶ月前にishitakaが編集しました。