[Theme: Coraline] Creating a fixed header

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.

Hi!

Well, this is a different theme, but look at Oulipo:

https://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?

Ah, I get it. The answer is usually “create a child theme!”

https://codex.www.ads-software.com/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. https://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.

You’re a genius, seriously. Thank you!

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.

Hi,sorry to post in this resolved thread. My coding is rubbish. I’m trying to create a fixed header that stays on the page no matter how much the viewer scrolls down. I’ve created a child theme and uploaded it via FTP to the theme folder in wp-content as mentioned. I am using evolution theme and this is what i pasted into styles.css:

/*
Theme Name: Evolution Child Theme
Author: Self-Help WordPress User
Template: Evolution
*/

@import url(“../Evolution/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;

Doesnt seem to work and i;m not sure why…Can anyone please help me?…my website is https://www.arbingersoutheastasia.com

Hi Jan,
I have the same problem with a very complicated theme.
The name is Contrast and this is the link
https://themeforest.net/item/contrast-responsive-minimal-html5-theme/full_screen_preview/1959210

I tried several ways but I can’t get it to work.
Can you help me?

If you need I can sand you the style.css file

Thank you!