How to change Page Header Background Image Height

On this page, http://bevins.flywheelsites.com/services/ and on other sub-pages, I would like to enlarge the header space so the entire top and bottom of the image are visible. The current image measures 1920px wide (as recommended) by 714 high. I have tried resizing in various heights (always with the recommended 1920px width) but without success. I see nowhere in settings to enlarge the header height, and I can't find this issue in support threads. My goal is to make the entire image visible - from the animals' feet to their ears.

I have these settings in Theme Options: Header > Style = "Classic"
And in Header > Background: Position is Parallax and Size is Cover.. With Sticky Header

Can you help please?

Thanks.


Comments

  • Hello,
    The "Header_wrapper" includes the "Header" and "Subheader" and height of it is a summary of these elements.
    So, in your case, I suggest to increase the padding of subheader element.
    Theme Options > Header & Subheader > Subheader

    Thanks
  • Thanks Pablo. I've been playing with the padding to see what works, and now have it set to where the bottom of the photo shows up. But the top of the photo is cut off by the menu bar. Any additional suggestions? Is there a max height allowable in this space? What does the second number (the "0" in "223px 0") in the Subheader Padding field do?

    Anything else I need to know to fix this?

    The page is at: http://bevins.flywheelsites.com/our-staff/ but it affects other pages as well, of course. I can provide login info separately if needed.

    Thanks again.
  • It's not cutted off, the image is below header because it's set to display as a "Header" background.
    Layer of menu is more important than the background image, that's why it's not visible.
    See it here:

    In this case, you should set it as a background of a subheader.
    Thanks
  • Changing it to subheader background, increasing the subheader padding and making the header "minimalist without Header space" did the trick.

    Thanks Pablo.
  • Hi Pablo. Back to this if you don't mind. The subheader image is not showing up on iPhone/responsive. You can visit the site at www.animalmedicalcenterfrankfort.com.

    Any ideas?

    Thank you.
  • Please go to the Theme Options > Header & Subheader > Subheader, and change the "background size" to "cover"

    It should solve your problem.
    Thanks
  • That did the trick Pablo. One other thing please: On mobile, the logo/menu header seems to have a large amount of black space beneath it (between the logo/hamburger and the subheader image). How can I reduce that space on mobile only? Here's a screenshot: https://www.screencast.com/t/tn1gT1VPSB

    Thanks again.
  • Hey,
    go to theme options>responsive>header and check the "minimalist" option for the mobile menu.
    thanks
  • Thank you, sir. Outstanding customer service, as usual.

    Have a great day.
Sign In or Register to comment.