- This topic has 5 replies, 2 voices, and was last updated 6 years, 12 months ago by .
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- You must be logged in to reply to this topic.
Support › Forums › Flex Theme › how do I make the "site-top" area stick to the top when scrolling?
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
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;
}
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
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.
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
Welcome Kirsten.