WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Theme: Coraline] Creating a fixed header (8 posts)

  1. sigmaism
    Member
    Posted 2 years 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

  2. 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.

  3. sigmaism
    Member
    Posted 2 years 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?

  4. 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.

  5. sigmaism
    Member
    Posted 2 years ago #

    You're a genius, seriously. Thank you!

  6. 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.

  7. sahara.s85@gmail.com
    Member
    Posted 1 year ago #

    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

  8. omnisax
    Member
    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic