ウェブサイトをレスポンシブにするために、zurb Foundation を使用しています。アイデアは、ヘッダーが大きな画面で次のように表示されるようにすることです (実際に表示されます)。
####### |------ Search ----------| %%%%%%%%%%%
そして、これは小さな画面では(そうではありません):
###### %%%%%%%%%%
|---- Search ---|
2 つの問題があります。1つ目は、モバイルが実際に次のように見えることです。
######
|---- Search ---|
%%%%%%%%%%
2 つ目は、検索バーがクリックできないことです。z-index を変更して、行に非表示のコンテンツを表示しようとしましたが、役に立ちませんでした。レイアウトについては、プッシュ アンド プル モバイルを試しましたが、状況はさらに悪化しました。レイアウトのコードは次のとおりです。
興味深いことに、検索ボタンは表示されるべきではありませんが、表示され、クリック可能であり、検索バーと同じ形式になっています。
私がやろうとしていることは、zurb ファンデーションで可能ですか? 私は本当に、2つの異なる検索フォームを持つことを避けたいと思っています...
参考までに、zurb Foundation の scss 変数を次のように変更しました。
$totalColumns: 16;
$mobileTotalColumns: 8;
$columnGutter: 0;
次のようなヘッダーがあります。
<div class="row">
<div class="three mobile-three columns"></div>
<div id="search" class="eight mobile-eight columns">
<div class="row">
<div class="thirteen mobile-eight columns">
<!-- text input for search -->
</div>
<div class="hide-on-phones hide-on-tablets three columns">
<!-- Submit button for search -->
</div>
</div>
</div>
<nav class="five mobile-five columns">
<ul class="right">
<li><%= link_to 'Teams', '#' %></li>
<li><%= link_to 'Records', '#' %></li>
<li><%= link_to 'Settings', '#' %></li>
</ul>
</nav>
</div>
ヒントや提案をお寄せいただきありがとうございます。