レスポンシブ対応のメニューボタンを右上(タイトル横)に設置

スマホ表示の時にメニューを展開したり隠したりするボタンですが、ブログタイトルや説明の下に設置していたのを右上(タイトル横)にする方法です。

試したものの、説明の干渉になっちゃうので元に戻しましたが、今後使う場面がありそうなので書き留めておきます。

HTML

<header class="clearfix">
  <div id="btn-content">
    <span id="menu-btn"><i class="fas fa-bars"></i></span>
  </div>
  <div id="blog-title">
    <div id="blog-title-inner">
      <h1 id="title"><a href="<?php echo home_url( '/' ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
      <h2 id="blog-description"><?php bloginfo( 'description' ); ?></h2>
    </div>
  </div>
  <nav id="menu">
    <div id="menu-inner">
      <?php wp_nav_menu(); ?>
    </div>
  </nav>

blog-titleよりも先にボタンのタグを打ち込むのが良いのかも。

CSS

#btn-content {
  display: block;
  position: absolute;
  right: 10px;
  margin-top: 20px;
}

#menu-btn {
  font-size: 30px;
}

position: absoluteにして、rightで左右の位置、margin-topで上下の位置を整えればOK。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です