Fix Header/Banner Image on Home Page - Its too Short

Hello,
Can you please help me with this issue. I cannot figure out how to fix the height of the image banner/header. I have tried the background image, i have added it as content, I have it in the theme. Maybe even in the slider?
Thanks so much,
Kim

  • Adam Czajczyk

    Hi Kim,

    I hope you're well today and thank you for your question!

    I checked the site's front-end but I'm not exactly sure about the goal. I understand that this is the image that you mean:

    The container (the part of the page) holding that image is separate from the one below it which holds the "Scale your equestrian business..." text.

    The image in the upper container is actually quite big and only the small top part of it is visible. The question is then: are you trying to just make that "top part" (the header that holds logo and menu) a bit taller to show more of an image, while the rest of the page would move down?

    Or the goal here is to make that image a background for both the header part and that section below (with "Scale your..." text)?

    Let me know, please, so I could better understand what you wish to achieve and I'll be happy to assist you with it.

    Best regards,
    Adam

  • Kim

    Hi, thank you! Apologies, I really need to work on explaining things better in detail. lol

    Right now, every page has a different menu style in the header.
    My goal is to keep the menu/header consistent and appear transparent.
    For the home page, I want to use the same image used on the Contact Us page.
    But I want to keep the menu transparent on all pages (like the home page!)

    See my screen shots and I hope it makes sense.
    I have spent HOURS and HOURS on this, wasting so much time.
    There are a couple of other requests too, if you want me to make another job ticket, i can do that. I just though if you were on the page, it wasn't a big deal.

    Thank you so much, I hope this makes sense!
    Thanks
    Kim

  • Predrag Dubajic

    Hi Kim,

    I'm afraid that I don't see the issue with menu image not going full width, it does populate it for me.
    Can you tell me which browser and screen size you are checking on so I could see if I can replicate it then?

    About your other questions:
    - Height of section below menu on home page
    There's this CSS that's setting the height of that section:

    .entry-content div.mcb-section:nth-child(3) {
        height: 600px;
    }

    I'm not sure where this is coming from but this CSS should overwrite it:

    .home .entry-content div.mcb-section:nth-child(3) {
        height: auto;
    }

    - Make the picture fill the section (About part)
    The HTML structure of this section doesn't really want the image there to fill in the section, I can force it with some CSS but I'm not sure how it will affect smaller screens, so this should probably be discussed with theme developers instead.
    Here's the CSS:

    .home .entry-content div.mcb-section:nth-child(5) .mcb-section-inner .two-fifth {
        padding: 0px;
        top: -21px;
        right: -15px;
        margin-bottom: -30px;
        background-color: unset;
    }
    
    .home .entry-content div.mcb-section:nth-child(5) .mcb-section-inner .two-fifth .column_image {
        margin: 0;
    }

    - Menu not transparent on Contact page
    The menu itself is actually transparent, but the content with image starts below it and thus the menu background looks grey.
    This again seems to be theme related but this CSS could do the trick:

    .page-id-22 #Header {
        position: fixed;
        z-index: 999999;
    }

    - Spacing on Contact page.
    It's caused by the same CSS as on home page, and this should take care of it:

    .page-id-22 .entry-content div.mcb-section:nth-child(3) {
        height: auto;
    }

    - Contact us email
    If you're using HTML widget then replacing email with this HTML will make it clickable, just enter your own email there.
    <a href="mailto:YOUR@MAIL.COM">YOUR@MAIL.COM</a>

    The CSS fixes are more of "hacks" to get the desired styling as the HTML structure is not really "friendly" for your design.
    I would strongly suggest discussing this changes with the theme developers first, or if needed hire a developer to check your page structure and make the needed changes in order to accomplish the look you're after.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.