How to fix header cannot sticky in wordpress?


Tags: html,css,wordpress,wordpress-theming

Problem :

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



Solution :

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;">

    CSS Howto..

    How not to display / filter out special characters? (CSS or Javascript)

    how to remove selected option background color in IE browser through css?

    How to disable properties of external css class and use internal css class with same name but different property in html

    Responsive CSS, How to make clock maintain position with image on resize

    How to show a pointer on specific table with css and Twitter Bootstrap?

    Avoid the height change of a container + how to position a list item at end

    Duplicated footer html/css on another page, but shows up differently?

    How to get rid of excess blank space in CSS slideshow without getting rid of manual button transition?

    How to implement two sets of CSS Tabs on one page?

    How can I make a table column width somewhat similar automatically?

    Showing Div via CSS selector within a UL

    How can I eliminate all space between block divs?

    How to hide ads with media queries?

    CSS: How to make a block to cover all width of parent block

    Symfony2 Form Type - how to set form CSS class as attribute?

    How do I make the cursor stay as a pointer on text using jquery/javascript?

    jquery how to add image from computer

    How to reset a slideshow after the last picture is shown

    How to create a sphere in css?

    How to make responsive popup div?

    How to add Indian rupee symbol to the RadioButtonList control in asp.net using CSS design

    How to styling div with CSS fixed width and auto-resize?

    How to keep CSS class on menu item with dropdown

    angular ngShow with animate.css

    How to style first paragraph

    of the content differently without using css class , ID or javascript, with IE6 compatibility?

    How to turn on Visual Studio 2008 .css Intellisense on .less file

    Mapbox GeoJSON loaded via local URL: icons not showing popup properties

    how to use removeclass() function in Jquery to disable the CSS

    How to set expanded menu to be shut on page load

    How to add an url to image by css?