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

Tagged: 

This topic contains 8 replies, has 3 voices, and was last updated by  Yazmin 2 weeks, 3 days ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #7020

    manjeet
    Participant

    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

    #7024

    Andy
    Keymaster

    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.

    #7030

    manjeet
    Participant

    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/

     

    #7033

    Andy
    Keymaster

    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;
    }
    #7034

    manjeet
    Participant

    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

    #7035

    manjeet
    Participant

    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

     

    #7038

    Andy
    Keymaster

    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;
    }
    #7044

    manjeet
    Participant

    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

    #7046

    Yazmin
    Keymaster

    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.

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Get a Quote form is not coming on top of header image’ is closed to new replies.