[Support request] Transparent background in header

Home Forums Support [Support request] Transparent background in header

Home Forums Support Transparent background in header

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #605054
    Agustin

    Hi Guys, how can I achive this look in header? I have made it with elementor but the results in mobile are ugly, can I do this with GP only?

    header transparent

    #605137
    David
    Staff
    Customer Support

    Hi there,

    you can use a GP Page Header and set it to merged with Site Header. These articles provide some info:

    https://docs.generatepress.com/article/page-header-overview/

    Note: once the Page Header and Site Header are merged you can either make the Navigation colors transparent in the customiser, or you can set them in the Page Header (advanced tab). The latter means you can keep solid colors for sticky and transparent colors for merged header.

    #605218
    Agustin

    Thanks David

    With you help , I almost achieved the results I needed only one problem

    As you see in my example the header have a transparent background kind of a light gray.

    1. I have defined this light gray with Customize in site header and works there,
    2. But when I merge the site header and the page header I this color is lost , its like the background image is on top of the background color of the header
    3. I have used the Advanced Options to define this transparent colors as background but then the whole image is covered in the transparent color

    I am missing something right?

    Regards

    #605224
    David
    Staff
    Customer Support

    Hi,

    ok for your current set-up it would be easier to hit the header with some CSS (adjust accordingly):

    .generate-merged-header .site-header {
        background-color: rgba(35,117,224,0.5);
    }
    #605328
    Agustin

    Thanks Dave worked super!!!

    One last issue , I have added a logo for the mobile view to be shown instead the picture.

    Since the header image is 2000 x 1000 is there a css code to resize the image for mobile view?

    Regards
    Agustin

    #605357
    David
    Staff
    Customer Support

    I would suggest the following changes, remove the text from the background image and instead add this as content to the Page Header, currently the text in the image is being cut off when the browser is rescaled. It also makes the text indexable.

    If you then still need to adjust the image or simply remove it we can apply some CSS to do so. Let me know

    #605389
    Agustin

    OK I will do that and come back to you then

    Regards

    #605503
    Agustin

    Done David , I will use an slider instead, fixed the scaling , but in mobile the menu is Kind of Lost in the image and a big gray are now apears besides the slider, can this be fixed?

    Maybe view the Menu Above the Slider , in black instead of white, any other solution you suggest wiil be great, only need to fix the mobile view , Menu and Slider.

    Regards

    #605512
    David
    Staff
    Customer Support

    With MetaSlider under the Advanced Options their is the option to stretch 100% – currently it is limited to 2000px wide. You will need to remove the full height option in the header as well or you will have a lot of empty space below it on smaller screens.

    #605538
    Agustin

    Hi Dave, fxed then. only one issue remains

    the mobile menu is lost in the picture now, can be put above or below the slider, outside of the picture?

    I attach a pic

    Mobile view

    #605540
    David
    Staff
    Customer Support

    You can assign a Mobile Header in the Customiser > Layout > Header this should resolve the problem

    #605559
    Agustin

    Hi Dave, I only managed to center the mobile menu, but not put it outside the header.

    I am missing some setting ?

    I hve used the option mobile menu on and off and the problem still exists.

    Regards

    #605746
    Tom
    Lead Developer
    Lead Developer

    You can un-merge the navigation on mobile like this:

    @media (max-width: 768px) {
        .generate-combined-header {
            position: relative;
        }
    }

    Does that get you closer?

    Let me know 🙂

    #606020
    Agustin

    Hi Tom!
    I added some margin and worked great!!!!

    Regards and thanks to both of you
    Agustin

    #606028
    David
    Staff
    Customer Support

    You’re welcome. Glad we could help

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.