Hey, you certainly noticed that the website had a new look. I used the wordpress Spacious theme. You can find it here.  This theme is responsive and you can highly customize the header. Basic header consiste of a picture and a menu. It’s look like as this:

Thème origine

This already look great but, I would to overlay the menu on the header image. This post explains how to change the theme in order to have somethink like this:

How to do?

Disable Header image

In the theme customization, just disable the header image.

Updating CSS

So now, the CSS. First I add the background image in ID #header-text-nav-container. The CSS code is:

Now you have the image cross the page. The last think to add is to give an oppacity to the backgound image. This improve text lisibility.


That’s all!

if it can help someone : )

WordPress Spacious theme modification
Tagged on:         

Leave a Reply

Your email address will not be published. Required fields are marked *