Thanks krystinealaina. I’m glad you like it 🙂
Quick question! Is there a way to lock the header (with header image and menu) in place and have the rest of the page scroll under it as the user views a page?
There’s no option “straight out of the box” for achieving that effect, but it’s not hard to add. You’d need to add the following styles to #headercontainer
position: fixed;
top: 0;
z-index: 10;
and change the following style on #bannercontainer
margin-top: 110px;
Within your style.css file. You’d probably want to add a background colour to your #headercontainer as well, so that you can see it properly when other content is scrolling below it.
THANK YOU!!!!! Worked perfectly! I even added a bottom border so the header is visibly divided from the content as you scroll. Awesome! Loving this theme even more. Check out my website in a few days to see your work in use! Thanks again!
http://www.krystinealainastyle.com
Sorry; one more question! Now that the header is locked in place, I notice that because the theme is responsive, it is locked on my mobile device as well and completely covers the content. I want to keep the header locked for desktop but not for mobile. Any way to circumvent??
Hi Krystine,
You’ll just need to adjust the media queries, which are located toward the bottom of style.css.
You’ll see one that says ‘@media only screen and (max-width: 800px)’. Within this media query, just add:
#headercontainer {
position: inherit;
}
#bannercontainer {
margin-top: 10px;
}
So basically, all you’re doing here is changing them back to what they were originally, once the screen hits a certain size.
You are fantastic. Thank you again!!! Seriously, do you have a donation site?? I feel like I owe you. Haha. Thank you thank you thank you! My site is live now so check it out! 😉
Thanks Krystine. Your site looks great. Glad you’ve got everything sorted 🙂
