user3077416 user3077416 - 4 months ago 9
CSS Question

How to fix header cannot sticky in wordpress?

I already added new feature like sticky header especially in custom theme wordpress on my development website got unexpected result about navigation cannot sticky after logo like screenshot below:
sticky

Here style.css

.site-navigation {
width: 100%;
background: #fff;
font-family: Arial;
font-weight: bold;
color: #252525;
letter-spacing: 0.25px;
border-bottom: 1px solid #e2e2e2;
margin-bottom: 3%;
position: fixed;
top: 0;
bottom: auto;
}

.outer {
position: relative;
}

.outer .site-navigation {
width: 100%;
background: #fff;
font-family: Arial;
font-weight: bold;
color: #252525;
letter-spacing: 0.25px;
border-bottom: 1px solid #e2e2e2;
margin-bottom: 3%;
position: absolute;
bottom: 0;
z-index: 2;
top: auto;
}


How I can fix it so I can get same result like this tutorial?

Updated #2:

I already added javascript and little modified css to my custom theme based on @Saypontigohe suggestion but still not luck.

Here js code:

jQuery(document).ready(function($) {
window.onscroll = effects;
function effects(){
var topdis = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;//distance between top and scroll position
var scrollHeight = (document.getElementById("action").clientHeight)-200; //height of client scroll, 200 is the amount of pixels from the header


if(topdis < scrollHeight ){ //if the distance is less than the header height, normal position
document.getElementById("site-navigation").style.position= "relative";
}
else if(topdis >= scrollHeight ){ ///if the distance is more than the header height, fixed position
document.getElementById("site-navigation").style.position= "fixed";
}
}
});


Updated #1:

Its already fixed based on @iyyappan suggestion and have another problem about how to fix showing sticky header after logo when first time to open website before scrolling like concept below:
main menu

Answer

Please try this one.

.site-navigation {
    clear: both !important;
    position: fixed;
    z-index: 99;
}

Edit:

.site-header {
    background-color: #ff870f;
    border-bottom: 1px solid #ffffff;
    margin: 0 auto;
    min-height: 100px;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 99 !important;
}
.site-navigation {
    background: #ffffff none repeat scroll 0 0;
    border-bottom: 1px solid #e2e2e2;
    bottom: auto;
    color: #252525;
    font-family: Arial;
    font-weight: bold;
    letter-spacing: 0.25px;
    margin-bottom: 3%;
    position: fixed;
    top: 100px;
    width: 100%;
    z-index: 99;
}

Next to site-navigation apply the below style,

<div class="main-content" style="padding-top: 200px;">