0

私が取り組んでいるWPレスポンシブテーマ：

http://www.wpexplorer.me/tetris/

実際のファイルをいじる前に、Firefoxブラウザーアドオン用のFirebugを使用して変更を加えます。したがって、それまたは類似のものがある場合は、 position:fixed; を追加することで確認できます。#header セクションでは、ヘッダーの幅が元のサイズの半分以上に縮小され、ナビゲーション メニューが新しく縮小されたスペース内に表示されます。

width:100%;, width:959px; のような #header セクションにコーディングの他のスニペットを追加しました。レイアウトを台無しにする他のパーセンテージとピクセル。特に、ウィンドウのサイズをタブレットやモバイル デバイス用と見なされるサイズに縮小すると、まったくうまくいきません。このテーマのスティッキー ヘッダーが機能しないか、正しく動作しません。ああ、z-index:200; も追加しました。#header セクションと margin:160px 0; に #メインコンテンツへ; これらは私に問題を与えません。

幅を追加: ; #main-content へのコードも役に立たないようです（オンラインのどこかで、これが幅コードの場所であると読みました）。

とにかく、このテーマのヘッダーをページの上部にスクロールするために必要なコードを知っている人はいますか? ? また、ウィンドウのサイズがモバイル デバイスのサイズまで完全に縮小されたときに、レイアウトがそのままの状態で動作するようにすることはできますか?

ありがとう。

4

1 に答える 1

0

これはうまくいくはずです

#header-wrap{position:fixed;top:0;z-index:999;}
#pre-header{margin:20px 0 15px;width:960px;}
#main-content{margin:215px 0 30px;}

位置は、z-index：999で0を使用して上部に固定されます。次に、残りと一致するように、内部コンテナーのプリヘッダー960pxの幅を設定する必要があります。

設定した他のサイズのメディアクエリを設定する必要があります。簡単、そしてお楽しみください。

ソーシャルアイコンではなくメニュー自体をソーシャルアイコンなしで上部の固定バーにしたい場合は、jqueryスクロールCSSを変更して、＃headerが固定位置になるようにします。

固定ヘッダーとソーシャルで動作します：

WPレスポンシブテーマ

Jquery Scroll CSSの変更を使用して、ソーシャルバーなしで機能する図：

テトリスWPレスポンシブテーマ

これは私が行う方法です。メニューを下に移動し、メニュー自体にソーシャルアイコンを追加します。（以下は私が言っていることのスクリーンショットです、ソーシャルアイコンは75％に減らされています）

固定メニューソーシャルバーWPレスポンシブテーマ

PS。ソーシャルアイコンは非常に目立つので、CSS3グレースケールを追加します。訪問者がそれらの上にカーソルを合わせると、トランジション効果で色がオンになります。お役に立てれば ;）

于 2012-12-17T01:37:09.217 に答える