Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] transparent section so page header is visible; not on mobil devices

Home Forums Support transparent section so page header is visible; not on mobil devices

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #474947
    Yannick

    Hi,
    I’m redoing my page right now and try to reduce pages build with Elementor but it seems like I need some help to fulfill my wishes… 😀

    This is my old About-Page: http://amuddyroad.com/index.php/about-us/

    This is my new Test-Version: http://amuddyroad.com/index.php/slider-test/

    I have now the background image in the page header. I would like to have the first section with the quote transparent so I can see the background image slightly through the section, like on the old page. Is this possible?
    I tried:
    .quote {
    background-color: rgba(0, 0, 0, 0.5) !important;
    }
    but it seems like the page header is in a complete other layer?

    On mobile devices the fullscreen background image gets cropped and in this case this is not wished (else our faces are not visible anymore). My favorite solution would be: the background image fullscreen on desktop and fitting on mobile devices, is this somehow possible?
    If this is not possible I would like to remove the page header on mobile devices. My attempts failed, I tried things like:

    @media
    (max-width: 768px) {
    .aboutpic {
    display: none !important;
    }
    }

    Best wishes
    Yannick

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #475327
    Leo
    Staff
    Customer Support

    Hi there,

    I think you can achieve that by having the quote as page header content, position it to the bottom with CSS, then giving it a background color.

    Background images aren’t responsive by nature. What we can do is to switch out a picture specifically for mobile if that helps:

    @media (max-width: 768px) {
        .generate-content-header {
            background-image: url(http:/MOBILE-BACKGROUND-URL);
        }
    }
    #485917
    Michael

    Hi Leo

    So I just go in to css and paste the code in it?

    #485952
    Michael

    Hi.
    Did you switched out for me already?
    Because my background image header is gone.
    I thank you if you did.
    1. How do I change background color?
    2. How do I overlay the background header color with an image?

    #485998
    Leo
    Staff
    Customer Support

    No I didn’t switch it out for you. We don’t log into your website unless it’s necessary and never make changes for you – we just guide you through.

    You would use one of these methods here for CSS: https://docs.generatepress.com/article/adding-css/

    Then replace http:/MOBILE-BACKGROUND-URL to the actual image URL.

    #486001
    Michael

    Can I use smiple css and paste your code?
    http:/MOBILE-BACKGROUND-URL to the actual image URL.

    #486032
    Leo
    Staff
    Customer Support

    Yup that would be my recommendation 🙂

    #486036
    Michael

    Thanks.

    Would you able to assist with the other topic.
    Enable mobile header.
    I’m having trouble inserting logo icon and it doesn’t display.
    Hat should I do?

    #486063
    Leo
    Staff
    Customer Support

    This one?

    Can you add the link to your site using the video instruction and make sure it’s not under coming soon page?

    #486064
    Michael

    Hi Leo

    I’ll follow the video.
    And probably useloom myself.
    If it doesn’t work I’ll give you
    Admin access.
    I can’t turn coming soon page until I built the site.

    #486067
    Michael

    Sorry what video instruction are you referring too?
    Useloom? Or video instruction from your site to show how to enable mobile header. If so, where is it in website?

    #486087
    Leo
    Staff
    Customer Support
    #486091
    Michael

    Thanks

    #486093
    Leo
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.