Static Header

  • Author
    Posts
  • #719069

    Help! New to the whole CSS thing. Was wondering if there is an easy way to get everything from my header image and above to stay static while everything else scrolls? Any advice would be GREATLY appreciated. Thanks!

    The blog I need help with is thebuddingdesigner.wordpress.com.

    #719171

    raincoaster
    Member

    Not using CSS. That’s something that’s a part of the underlying theme files which we don’t have access to here at WP.com.

    #719367

    Hang on, you can do stuff like that with CSS. :)

    Try this:

    #header, #header-image {
        position: fixed;
        top: 0px;
        z-index: 9;
        background: white;
    }
    #header-image {
        margin-top: 90px;
    }
    .middle {
        margin-top: 230px;
    }

    Note that it’s specific to your design (with already modified CSS) on the Blogum theme.

    #719374

    raincoaster
    Member

    You CAN? Wow, ya learn something new every day on the internet.

    #719375

    Heh. :)

    #719407

    Awesome, thanks!

    #719419

    beaujangls1
    Member

    @designsimply I have also been trying to get this to work for the 2011 theme. Can you please direct to which file I would add the “position:fixed” code to. Would it be the header.php file?

    #719422

    timethief
    Member

    @beaujangls1
    Please post an active link starting with http:// to the blog in question.

    #719425

    The CSS posted above is specifically for the Blogum theme.

    I wouldn’t really recommend making the header area static… it takes up a ton of space and it seems like it would be annoying on small screens.

    For the Twenty Eleven theme, I looked at the demo site as an example http://twentyelevendemo.wordpress.com/ and you could set the header as fixed with this CSS:

    #branding {
        position: fixed;
        background: white;
        max-width: 1000px;
    }

    You’d probably also want to get rid of the gab at the top of the page or the content shows through when you scroll:

    #page {
        margin: 0em auto;
    }
    #719426

    beaujangls1
    Member

    sorry here you go…

    http://theconductorswhiskey.com/

    #719427

    @beaujangls1, your site is made with WordPress, but it isn’t hosted here at WordPress.com. Hopefully, you’re already on the right track! To get further help, you should ask at http://wordpress.org/support/

    #719428

    timethief
    Member

    Hello again,
    Thanks for posting the URL. Please got to the footer of your theme and locate this link and click it > Proudly powered by WordPress You are posting to the wrong support forum. You must post to http://wordpress.ORG/support/ to get support for that site.

    On this forum we provide support only to those with free hosted WordPress.com blogs, who have purchased a custom design upgrade. Your software and your theme are not the same as the versions we are running here. WordPress.com vs WordPress.org

    #719429

    timethief
    Member

    ~~designsimply
    Sorry – simultaneous typing

    #719430

    No worries!

    #719432

    beaujangls1
    Member

    thanks designsimply! that was exactly what I was looking for. I was not aware that the forums were different…thanks for letting me know. Thanks again for the help!

    #719433

    Cheers. :) Good luck with your designing!!

The topic ‘Static Header’ is closed to new replies.