Support Center Visit Demo License manager Buy @ envato

How to change Page Header Background Image Height

ArrastiaArrastia
in Theme support
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

  • PabloPablo
    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
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • ArrastiaArrastia
    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.
  • PabloPablo
    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
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • ArrastiaArrastia
    Changing it to subheader background, increasing the subheader padding and making the header "minimalist without Header space" did the trick.

    Thanks Pablo.
  • ArrastiaArrastia
    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.
  • PabloPablo
    Please go to the Theme Options > Header & Subheader > Subheader, and change the "background size" to "cover"

    It should solve your problem.
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • ArrastiaArrastia
    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.
  • BryanBryan
    Hey,
    go to theme options>responsive>header and check the "minimalist" option for the mobile menu.
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • ArrastiaArrastia
    Thank you, sir. Outstanding customer service, as usual.

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