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

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

Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 4, 2019 at 12:11 pm #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

    April 4, 2019 at 12:15 pm #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.

    April 5, 2019 at 8:45 am #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/

     

    April 5, 2019 at 8:53 am #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;
}
    April 5, 2019 at 1:13 pm #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

    April 5, 2019 at 2:59 pm #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

     

    April 5, 2019 at 3:05 pm #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;
}
    April 6, 2019 at 2:28 am #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

    April 6, 2019 at 8:59 am #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.

  • Author
    Posts
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.