[Support request] How to overlay/insert widget on my page header?

Home Forums Support [Support request] How to overlay/insert widget on my page header?

Home Forums Support How to overlay/insert widget on my page header?

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #609656
    Mariel

    How can I overlay a widget on my page header? This one for example:

    View post on imgur.com

    I have a full-width page header and right now, widgets are just being added on top of the page header which pushes all of my content down.

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #609716
    David
    Staff
    Customer Support

    Hi there,

    are you using the GP Page Headers?
    If so then, what is the widget element you wish to add? Is it just an Image / HTML / text?
    And is there any other content in the page header? eg. the title

    #609728
    Mariel

    Yes, I’m using GP Page Headers but only for single posts. I would like to add a clickable image. There is no other content in the page header except for the full-width header image.

    #609756
    David
    Staff
    Customer Support

    Hi Mariel,

    have you thought of adding an image wrapped in a link to the page header content area?

    Let me know

    #610057
    Mariel

    Hi David, I think there’s a bit of a confusion. I’m already using GP’s Page Header for the featured photos of my posts. It’s not really what I want to change.

    What I’m trying to do is add an image on top of my site identity’s full-width page header (or logo) — not GP Page Header.

    Please see this illustration I made: https://imgur.com/bFza2UW

    Hope that’s clear. Thanks!

    #610105
    David
    Staff
    Customer Support

    Few options
    1. Simplest method would be to set the Logo Image you already have as a Background image to to the Header and then add your other image as the logo. The header can then be aligned right.
    2. As above but add the second image as a Header Widget instead of the site logo.
    3. As it is now, add the Header Widget and i can help align it with some CSS.

    #610300
    Mariel

    Thanks, David. Would like to use option 3 (CSS)

    #610528
    David
    Staff
    Customer Support

    Can you add the widget in place and then i can have a look and work out the code . Let me know

    #610906
    Mariel

    Hello, already added the widget. Hope you can fix as the site is live. Thanks.

    #610917
    David
    Staff
    Customer Support

    Hi, the widget is empty? We need the image in there to help position it.

    #611049
    David
    Staff
    Customer Support

    Try this CSS:

    .inside-header {
        position: relative;
    }
    .header-widget {
        position: absolute;
        top: 20%;
        right: 5%;
        width: 20vw;
    }

    You may need to tweak the top, right and width properties.

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