ワードプレスでヘッダーを貼る方法

Question

これは私のウェブサイトhttp://www.expresskerala.comのリンクです。このウェブサイトでは、私はヘッダーを固着させる必要があります。それを固着させる方法はありますか？私はこのコードを試しました。

.site-header { 
    background: #e5e5e5 none repeat scroll 0 0; 
    position: fixed; 
    width: 100%; 
    z-index: 99 !important; 
} 

ただし、このコードを使用すると、他のコンテンツは停止します。このための解決策はありますか？これも対応する必要があります。

Answer 1

position:fixed要素がドキュメントフローから取り出されるため、.site-headerの高さに等しい上マージンを次の要素に追加する必要があります。また、.site-headerを文書の先頭に固定するには、top:0を追加する必要があります。

.site-header { 
    background: #e5e5e5 none repeat scroll 0 0; 
    position: fixed; 
    width: 100%; 
    z-index: 99 !important; 
    top: 0; 
} 
.site-header + * { 
    margin-top: 240px; 
    // you should change this using media queries if the site-header height changes 
} 

Answer 2

このような何か：

@media only screen and (min-width: 1024px) { 
    .site-header { 
     position: fixed; 
     z-index: 1; 
    } 

    #main > .container { 
     padding-top: 250px; 
    } 
} 

Answer 3

スティッキー位置W3schoolまたは使用jqueryの固定

Answer 4

とあなたが

body { 
    padding-top: 240px; 
} 


.site-header { 
    background: #e5e5e5 none repeat scroll 0 0; 
    position: fixed; 
    width: 100%; 
    top: 0; 
    z-index: 999; 
} 

Answer 5

はこの追加を追加し、より良い結果を得るために、これらのCSSを追加することができますがあなたのファイルにCSSがあります

使用0より

.fixed-header { 
    position: fixed; 
    top:0; 
} 

このスクリプト：

$(window).scroll(function(){ 
    if ($(window).scrollTop() >= 140) { 
     $('nav').addClass('fixed-header'); 
    } 
    else { 
     $('nav').removeClass('fixed-header'); 
    } 
}); 

/* scrollTop() >= 140 
    Should be equal the height of the header 
*/