Site logo

Archived topic

Move downwards to "float" above

3 replies · Started by Jono on November 10, 2016

Viewing posts 1–4 of 4

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/

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 :)

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

You're welcome :)

This archived topic is closed to new replies.