Posted 3 months ago #
Hello,
I'm still learning WordPress but I'm incredibly frustrated with this header setting. I'd like to set it up so that the header (and menus) stay fixed at the top of the page and everything else scrolls behind it. I've seen some tweaks online, but I'm not entirely sure if I do that in Coraline it won't destroy it. Does anyone have a simple-to-understand method for fixing the header in place?
Thanks!
-Sigmaism
Posted 3 months ago #
Can you clarify for a bit or provide a link to an example? It sounds like you want the header image to be a CSS background image, floating in the background.
Right now that header jpg is in the HTML of that page. That would make making it fixed in place challenging.
Posted 3 months ago #
Hi!
Well, this is a different theme, but look at Oulipo:
http://oulipodemo.wordpress.com/
It's a vertical navigation system, that stays in place while everything else scrolls.
Is there a way to set it so that the header (by this I mean both menu and image) of the Coraline theme will stay at the top, while things beneath it scroll?
Posted 3 months ago #
Ah, I get it. The answer is usually "create a child theme!"
http://codex.wordpress.org/Child_Themes
In your wp-content/themes directory, create an empty directory called coraline-child. In that directory create a file named style.css and copy in these lines below into that file.
/*
Theme Name: Coraline Child Theme
Author: Self-Help WordPress User
Template: coraline
*/
@import url("../coraline/style.css");
/* Start child theme CSS here */
#header {
position: fixed;
top: 0;
background: rgb(255, 255, 255); /* The Fallback */
background: rgba(255, 255, 255, 1);
z-index: 10;
height: 300px;
width: 770px;
}
#content-box {
margin-top: 300px;
}You can copy the file from this Pastebin link too. http://pastebin.com/5dhAeLjq
This assumes you use the default layout which is 770px wide.
This will make the header and all it's elements have a fixed position, have a solid white background, and will be on top of other divs and elements.
The content-box will start with a 300px margin on top. This matches the height of the header.
If you create that one file wp-content/themes/coraline-child/style.css and then activate the new "Coraline Child Theme", then you may get the effect you are looking for.
Posted 3 months ago #
You're a genius, seriously. Thank you!
Posted 3 months ago #
Why, thank you! *Turns to wife on train and says "See?", wife replies "Of course you are" and goes back to reading the paper.*
Could you mark this one resolved? It's for the WordPress cafeteria, I want to get another free soup.
You must log in to post.
