[riccrom123]

Hi thank you for this beautiful theme! I would like to know how to remove the header-content above the header-image and put the logo centered over the header-image.

[Pratik]

hi @riccrom123,

Please post in your site url so i can check it.

Regards,
Pratik

[riccrom123]

thank you for your quick reply
http://fabricfoto.it/testcatchevolution

[marga]

Hello Pratik,

I have the same issue in http://testwp.heilpraktiker-schirnig.de/

greetings Marga

[Pratik]

Hi @riccrom123,
I cannot see a logo currently in your site. Please add it and let me know. Then I will provide you with CSS code.
———————————————————————————
Hi @marga,
Do you want to remove gap in header content and center the logo a well? For that, you can add following CSS code in Appearance=> Customize=> Theme Options => Custom CSS box:

/* Remove Header content top gap */
#header-content {
    padding-top: 0;
}
/* To center logo */
#site-logo {
    margin: 0 auto;
    width: 100%;
}

Let me know how it works out.

Regards,
Pratik

[marga]

Great thanks Pratik,
this works,
now I also would like to center the text underneath the logo as well
greetings
marga

[riccrom123]

I don’t know why the logo is not shown. In theme settings I uploaded the logo..

<div id=”site-logo” class=”clear”></div>

if I inspect the page with chrome it says 0 x 0 pixels (Natural 292 x 190 pixels)

[riccrom123]

the html code in my message was interpreted

<///div id=”site-logo” class=”clear”></div///>

[riccrom123]

I try again

<///div id=”site-logo” class=”clear”><///a href=”http://www.fabricfoto.it/&#8221; title=”Proravera”></div>

[riccrom123]

<***div id=”site-logo” class=”clear”><***a href=”http://www.fabricfoto.it/&#8221; title=”Proravera”><***img src=”http://www.fabricfoto.it/wp-content/uploads/2016/02/logo_292x190.png&#8221; alt=”Proravera”></div>

[Pratik]

Hi @marga,
You can add following CSS to center the Site Title:

#site-details {
    text-align: center;
    width: 100%;
}

———————————————————————————-

Hi @riccrom123,

The logo is not showing due to Plugins conflict. It is strange but the plugins are adding CSS to .clear class. Please deactivate another-wordpress-classifieds-plugin and Simple Shortcodes plugin, then the logo will be visible. Then I will be able to help you with custom CSS.

Regards,
Pratilk

[riccrom123]

Hi Pratik
I just deactivated simple shortcodes plugin and now the logo is shown.. Tell me if must to deactivate also the other plugin

[Pratik]

Hi @riccrom123,
No need to deactivate another plugin. Now, to remove gap in header content and center the logo, you can add following CSS code in Appearance=> Customize=> Theme Options => Custom CSS box:

/* Remove Header content top gap */
#header-content {
    padding-top: 0;
}
/* To center logo */
#logo-wrap {    
    text-align: center;
    width: 100%;
}
#site-logo, #site-details {
    float: none;
}

Let me know how it goes.

Regards,
Pratik

[riccrom123]

Thank you Pratik in the next step I would like to put the logo centered in the header-image. Sorry but my english is not so good so I explained it bad..

[marga]

Thanks, Pratik this works…

greetings Marga

[riccrom123]

In other words i would like to move the div header-content inside the div header-image or contrary.

[Pratik]

Hi @marga,

Glad everything worked out. If you liked our theme and support, please leave us your valuable review at here.
——————————————————————————————————————————————————————–
Hi @riccrom123,

I do not understand what you mean because if you move header-content inside header-image, there will be no difference. I think you the header image to be the background of your logo. It that is the case, you first need to add following CSS code in Appearance=> Customize=> Theme Options => Custom CSS box:

#header-content {
    background-image: url("http://www.fabricfoto.it/wp-content/uploads/2016/02/testata_1600x230.png");
    background-size: cover;
}

Then remove the header image by going to Appearance=> Customize=> Header Image and Clicking on Hide Image.

Maybe you will want to hide the Site Title from there too. To do that, go to Appearance=> Customize=> Site Identity and uncheck “Display Header Text” option.

This should solve the issue as you want. If not, please let me know and I will assist you further.

Regards,
Pratik

[riccrom123]

very well pratik! Now, if I’m not asking too much, I would like to see the full background at every resolution. Also the logo have to resize to mantain the correct proportion
For the background I tried with this code but doesn’t work together with the logo:

#header-content {
width: 100%; height: 100%; top: 0; left: 0;
background: url("http://www.fabricfoto.it/wp-content/uploads/2016/02/testata_1600x230.png") no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

maybe I solve designing the logo in the background…

[riccrom123]

If I think better I don’t need the logo to resize.

[Pratik]

Hi @riccron123,

There are two ways to achieve what you want, both a bit different. I will provide you css for both:
1. Following code will resize the image with respect to screen. Will not maintain the aspect ratio:

#header-content {
    background: rgba(0, 0, 0, 0) url("http://www.fabricfoto.it/wp-content/uploads/2016/02/testata_1600x230.png") repeat scroll 0 0 / 100% 100%;
}

2. Following code will show full image and maintain the aspect ratio but will show gaps when the image cannot cover (because it will maintain the aspect ratio):

#header-content {
    background-image: url("http://www.fabricfoto.it/wp-content/uploads/2016/02/testata_1600x230.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

Let me know which one works out for you.

Regards,
Pratik

[Author]

Posts