固定ステータスバーがスライドアウトメニューと矛盾します

Question

iOSのステータスバーのように、ページ上部にステータスバーが固定されたサイトを作っています。私はそれがトップに固定されているので、常にそこにあり、その下にコンテンツロールがあるようにします。私はまた、ステータスバーのボタンからトリガされるメニューをスライドアウトしています。すべてのサイトのコンテンツは、メニューがスライドしたときにサイドにプッシュされるdivにラップされます。

メニューがスライドすると、ステータスバーに問題が発生します。 position: fixed;に設定されているため、移動されたくありません。これは、ステータスバーをページの下にプッシュします。

ステータスバーのための私のCSS：

.toolbar { 
color: purple; 
position: fixed; 
width: 100%; 
height: 60px; 
top: 0; 
left: 0; 
padding-top: 20px; 
background: white; 
border-bottom: 1px solid $white; 
z-index: 99; 
text-align: center; 
} 

JSフィドルはちょうどMENU]ボタンをクリックし、問題の完璧な例です。

JSFiddle：コメントに基づいて https://jsfiddle.net/mqrso95g/1/

Answer 1

編集：

あなたのNAVの内側のdivを追加すると、メニューが開いているとき、あなたはその内部のdivにマージン左を追加することができます。このjsfiddleは、サイドメニューが開いたときにメニューボタンが表示されるようになりました。

ツールバーの変数をMenu.prototype._initに追加し、.inner.is-active{ padding-left:300px; }を使用して固定ナビ内のコンテンツを埋め込みました。固定要素に余白やパディングを追加することはできません。

https://jsfiddle.net/Lz9fqvy8/

オリジナル回答

================================= ====

コンテンツをスライドアウトメニューの下に隠すと、ツールバーはそのまま残ります。これを達成するために、.site-wrap.has-push-leftからtranslateXを削除しました。

https://jsfiddle.net/hg9038vd/

またmargin-left:300pxでtranslateXを置き換えることができますし、ツールバーには、プッシュダウンしません。

https://jsfiddle.net/m5xcq3zf/