how do I make the "site-top" area stick to the top when scrolling?

[radiantaction]

Hi there,
I’m trying to get the top area with the “site-top” class stick to the top. Can anyone point me in the right direction for this?

site url > http://dev5.khtestsite.com

I see there was a similar question posted but the resolution wasn’t listed.

Thank you!

Kirsten

[Davinder Singh Kanith]

Try this

Replace following code in style.css file

.site-top {
    background: #fff;
    border-bottom: 1px solid #e3e3e3;
    color: #444;
    display: table;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    vertical-align: middle;
}

with this code

.site-top {
    background: #fff;
    border-bottom: 1px solid #e3e3e3;
    color: #444;
    display: table;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    vertical-align: middle;
    position: fixed;
    top: 0;
    z-index: 999;
}

[radiantaction]

Thank you Davinder! That worked for the most part. However, now I’m having problems with header placement as a result. The header it getting cut off on the top. I added the following to my css file:

.site-header {
margin-top: 15px;
}

This fixed the issue in safari and firefox but created too much upper white space in chrome.

I also tried adding “clear: both;” to .site-top to not avail.

Any advice on how to fix this? I’ve tried google and various suggestions but I can’t seem to get it resolved.

Thank you!
Kirsten

[Davinder Singh Kanith]

Hi Kristen

Just checked your site in Gooogle Chrome. The header logo area is looking fine, no extra space. Can you delete internet history and check again.

[radiantaction]

Hi Davinder,
Good grief I can’t believe I didn’t think of that. The cache was the problem. Thank you for all your help!

Kirsten

[Davinder Singh Kanith]

Welcome Kirsten.

[Author]

Posts