Mediumish Blogger TemplateのNavbar代替

この前紹介した Mediumish Blogger Template のNavbar代替です

畳まれたのを開くとおかしかったのもあったので

Navbar · Bootstrap
https://getbootstrap.com/docs/4.0/components/navbar/
をベースにミックスしてとりあえずなんとかしたやつ

Code

    <!-- Begin Nav
================================================== -->
<nav class='navbar navbar-toggleable-md navbar-light bg-white fixed-top mediumnavigation'>
  <!--<a class='navbar-brand' href='#'>Navbar</a>-->
  <button aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-target='#navbarSupportedContent' data-toggle='collapse' type='button'>
    <span class='navbar-toggler-icon'/>
  </button>

  <div class='collapse navbar-collapse' id='navbarSupportedContent'>
    <ul class='navbar-nav mr-auto'>
      <li class='nav-item active'>
        <a class='nav-link' expr:href='data:blog.homepageUrl'>Home <span class='sr-only'>(current)</span></a>
      </li>
      <li class='nav-item'>
        <a class='nav-link' href='#'>Link</a>
      </li>
      <li class='nav-item dropdown'>
        <a aria-expanded='false' aria-haspopup='true' class='nav-link dropdown-toggle' data-toggle='dropdown' href='#' id='navbarDropdown' role='button'>
          Dropdown
        </a>
        <div aria-labelledby='navbarDropdown' class='dropdown-menu'>
          <a class='dropdown-item' href='#'>Action</a>
          <a class='dropdown-item' href='#'>Another action</a>
          <div class='dropdown-divider'/>
          <a class='dropdown-item' href='#'>Something else here</a>
        </div>
      </li>
      <li class='nav-item'>
        <a class='nav-link disabled' href='#'>Disabled</a>
      </li>
    </ul>
          <form class='form-inline my-2 my-lg-0' expr:action='data:blog.homepageUrl + &quot;search&quot;'>
                            <table class='col'>
                                <tbody>
                                    <tr>
                                        <td>
            <input class='form-control mr-sm-2' name='q' placeholder='Search' type='text'/>
                                        </td>
                                        <td>
            <span class='search-icon'><button class='button'><svg class='svgIcon-use' height='25' viewbox='0 0 25 25' width='25'><path d='M20.067 18.933l-4.157-4.157a6 6 0 1 0-.884.884l4.157 4.157a.624.624 0 1 0 .884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z'/></svg></button></span>
            <input name='max-results' type='hidden' value='9'/>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
          </form>
  </div>
</nav>
    <!-- End Nav
================================================== -->

追加CSS

.button {
  background-color: transparent;
  border: none;
  padding: 0px 0px;
}
.button:focus {
  outline: none;
}

検索アイコンをクリックしても何も起こらないので、無理矢理ボタンを入れました

とりあえずMasonryレイアウト(Card columns)をGridに直すのは諦めた
組み替えられると思ったら、入れ子の構造がなんか違うのでループ出来ん