Get a Quote form is not coming on top of header image

[manjeet]

Hi,

 

I want to display Get a Quote form on home page for this website https://dev.manjeetkaur.website/

But I am not able to increase min-height for the header image.

I am doing this with elementor and want to make it display similar to the website (https://www.swiftcashforcars.com.au/)

 

Could you please help me fit this form inside the header image?

 

Thanks

 

Regards,

Manjeet

[Andy]

This is possible in Trusted Pro without using Elementor, as the Pro version has a custom header section that accepts [shortcodes] such as the ‘Contact Form 7’ form you are using.

[manjeet]

How can I do this in free version as I really want to have contact form on top of image.

Can you give a css code which can increase the min-height of the header image to make it fit the screen?

Have a look at my website and can you give me css code to increase the height of header image please?

https://dev.manjeetkaur.website/

 

[Andy]

Adding more top/bottom padding to the page title will increase the height of the header background image area.

This is the standard, change 70px to any value you require:

.header-title {
    padding: 70px 0;
}

[manjeet]

I was not talking about the header title.

I wanted to position the contact form on top of header image.

I have fixed it with below css now:

.main-header {
height: 700px;
}

 

Thanks

[manjeet]

But now the other pages has big header image.

Any idea how can  I keep larger image on home page only.

Or can i remove header images from other pages?

https://dev.manjeetkaur.website/ -> This is ok

https://dev.manjeetkaur.website/inner-brisbane/ -> here I want to have smaller header image.

 

Can you let me know how can I fix this?

 

Thanks

 

[Andy]

Yes I am aware that you are not talking about the header title but adding padding above and below the header title will create a larger area for the header image to fill.

I gave this answer because it has already been asked a few times on our support forum and this is the way we recommend to increase the height of the header image area as it also keeps the page title centered vertically.

Anyway, to apply it to the home page only use this instead:

.home .header-title {
    padding: 70px 0;
}

…or this if you prefer to set the height of the main header:

.home .main-header {
    height: 700px;
}

[manjeet]

Thanks. header image looks fine now.

Is there a way to have different header image for each page?

Like if I can make featured image as header image?

 

Thanks

[Yazmin]

The header image can be changed per page (and post, product, category etc.) in the Pro version. This extra option is not available in the free theme, sorry.

I am going to close this topic and mark as resolved as I believe your original question regarding changing the height of the header image has now been resolved successfully.

[Author]

Posts