WordPress.org

Support

Support » Themes and Templates » [Resolved] [Theme: Coraline] Creating a fixed header

[Resolved] [Theme: Coraline] Creating a fixed header

  • 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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator Jan Dembowski

    @jdembowski

    Brute Squad and Volunteer Moderator

    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:

    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?

    Moderator Jan Dembowski

    @jdembowski

    Brute Squad and Volunteer Moderator

    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.

    You’re a genius, seriously. Thank you!

    Moderator Jan Dembowski

    @jdembowski

    Brute Squad and Volunteer Moderator

    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 http://www.arbingersoutheastasia.com

    Hi Jan,
    I have the same problem with a very complicated theme.
    The name is Contrast and this is the link
    http://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!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Resolved] [Theme: Coraline] Creating a fixed header’ is closed to new replies.
Skip to toolbar