[Resolved] Move downwards to "float" above

Home Forums Support [Resolved] Move downwards to "float" above

Home Forums Support Move downwards to "float" above

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #243424
    Jono

    Hi Tom,

    I’m trying to move <header> down by 60px, so that page header images appear slightly above <header>.

    If I try to use

    header {position: absolute;
    top: 60px;}

    it moves the whole page down by 60px. If I try the same CSS but applied to #masthead or .site-header, it gives me the desired effect except that <header> is then no longer full width. It is shrunken and floats left instead of centered.

    Am I missing something? Is there a better way to achieve this? (I’m sure others have tried before me and succeeded!)

    Thanks very much for your time!

    Site link is http://www-dev.mcb.com.au/our-services/

    #243442
    Tom
    Lead Developer
    Lead Developer

    The Page Header image actually begins below the header, so it’s definitely not easy.

    You can try this:

    .site-header {
        position: absolute;
        width: 100%;
        top: 20px;
    }

    However it’s important to only add that CSS to pages that have a page header image set. You can use Simple CSS to add the CSS to specific pages: https://wordpress.org/plugins/simple-css/

    Hope this helps 🙂

    #243645
    Jono

    Beautiful! Thanks Tom… I needed that width: 100%.

    #243647
    Tom
    Lead Developer
    Lead Developer

    You’re welcome 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.