Move logo below header image.

[Gambalunga]

WP Version 4.9.4–it_IT, Weaver Xtreme Version: 3.1.12

I have developed a site for a friend and recently upgraded from Weaver II to Weaver Xtreme (love it!!)

The site has a header image of 1024×130 and the menu is fixed to top on scroll.

My “client” wanted her name and profession as Title/Tagline but in a particular text with drop shadow. I created this as the site logo in a jpg file with a size of 1000×95 and used the same colour background as the content area of the site. I found that gave better results than trying to use a png file with a transparent background.

The Custom Logo was set to “Replace Title with Site Logo” and “Hide WP Custom Logo: Do not hide”.

I then moved Title/Tagline over the header image (checking the appropriate tick box) and set  and then set the Title Position: X: 0% Y:14 % (this require a little trial and error to get the position where I wanted it).  The Hide Site Tagline: was set to “Hide on All Devices”

This naturally move the site logo over the content area. In order to space the content area down a little I placed the following code in “Custom CSS Rules”

/*bottom margin on header image*/
#branding #header-image img {
margin-bottom: 10%;
}

Again it took a little trial and error to get the margin-bottom percentage correct.

The result functions and the logo is responsive. The only thing is that the space between the bottom of the logo and the content increase slightly on mobile devices but it is within reasonable limits.

I am happy with the result but any suggestions for improvements would always be welcome.

The site is http://silvanarava.it/

[scrambler]

You may want to read the article below and experiment with these CSS features

Responsive Sizing: Two little known CSS properties

[Gambalunga]

Thanks Scrambler. I tried various settings of the CSS Properties you suggested but nothing quite worked for me. I did however discover that the margin (in the code above) was the incorrect property to use as it actually hid some of my content.

I have changed it to:

/*bottom paddingon header */
#branding {
padding-bottom: 10% !important;
}

Which seems to do what I want.

[Author]

Posts