Kadence Header Image

  • lisunte

    (@lisunte)


    2 years, 11 months ago

    I would like to add a non-sticky logo image in the upper-center of my header block, but cannot work out how to do this with Kadence.

    I’m using the Kadence theme pro, Kadence blocks pro.

    I’m trying to do what’s being done on this site:

    http://www.timdecker.com/

    I know how to add a smaller, separate logo to my sticky header, and I can add the larger logo within the header builder itself. But when I add a the larger logo image to the center block of the middle header row, it just drives my navigation menu’s down into my cover image (out of the header space). So that obviously doesn’t work.

    I’m proficient in Adobe CC. I’ve tried just adding the separate (non-sticky) larger logo image to the background image, but then the header nav menus / smaller logo sit on top of it. So that doesn’t work.

    There’s got to be a way to do what’s being done on the site referenced above. It doesn’t seem that difficult (although I don’t really know what I’m doing).

    Thanks

Viewing 8 replies - 1 through 8 (of 8 total)
  • Chito

    (@chitocamacho)

    2 years, 11 months ago

    Hey there,

    Thanks for the reference site. It uses custom CSS to achieve it.

    Since you have Kadence Pro, we can create a hooked element and use the Page Scripts feature from the Kadence Blocks Pro.

    Here’s a video for reference: https://share.getcloudapp.com/4guXPyLD

    Here’s the CSS code:

    .fixed-logo {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0px;
    width: 160px;
    height: 150px;
    background: gray;
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    box-shadow: 0px 10px 20px 0px #000000;
    text-align: center;
    z-index: 200;
    }

    Don’t forget to add “fixed-logo” class name in the Advanced Image block.

    Tweak the code to your liking.

    Let me know if you need further assistance.

    Best,
    Chito

    Thread Starter lisunte

    (@lisunte)

    2 years, 11 months ago

    Chito,

    Thanks so much for your time and effort.

    The video is very helpful because I’m just beginning to learn WordPress.

    I will try this evening.

    MODERATORS: Please do not close this thread.

    Chito

    (@chitocamacho)

    2 years, 11 months ago

    Hey there,

    You are welcome. If ever you need further assistance, just let me know, I’ll be around.

    Best,
    Chito

    Thread Starter lisunte

    (@lisunte)

    2 years, 10 months ago

    Chito,

    This worked great. Maybe you can help with one other thing.

    I created a pop-up, triggered by a linked phrase in my header. I used Kadence elements to create the popup (#popup), and the HTML widget in Kadence header to create and link the phrase to the #popup.

    The linked phrase in my header is ‘You Have A Message’.

    The text code is; <a class=”modal-trigger” href=”#popup”>You Have A Message</a>

    It works great. However, I’d also like the page to advance down to a particular heading at the same time the popup opens (the pop-up opens and the page simultaneously advances behind the popup).

    I added the HTML anchor ‘what-people-are-saying’ to the heading block I want the page to advance to. But I’m not sure how / if I can add this code to the above code and make both these things happen at the same time.

    Because I don’t know a thing about this.

    Thank you.

    Scott

    Chito

    (@chitocamacho)

    2 years, 10 months ago

    Hey Scott,

    Thanks for letting me know the first query is already resolved.

    Regarding the popup, could you please share the link to the page you are working on? Also, if it’s possible, could you also please send a screen recording? You can use https://zight.com/ and send the video link here as a reply.

    Thanks,
    Chito

    Thread Starter lisunte

    (@lisunte)

    2 years, 10 months ago

    Chito,

    I’m sorry, I cannot send a link. The site is not live.

    Thank you.

    Scott

    Chito

    (@chitocamacho)

    2 years, 10 months ago

    Hey Scott,

    That’s fine. You could perhaps send a screen recording instead, so I can replicate the setup on my test site, and I’ll see if I can help.

    Best,
    Chito

    Hassan

    (@repairappliancesdubai)

    2 years, 10 months ago

    To add a non-sticky logo image in the upper-center of your header block using the Kadence theme and Kadence Blocks Pro:

    1. Create or edit a header template using Kadence Header Footer Builder.
    2. Add a row for the logo image and position it at the upper-center.
    3. Upload the logo image using an Image block within the row.
    4. Adjust navigation menu settings to prevent overlap.
    5. Configure the sticky header separately if needed.
    6. Use custom CSS if layout conflicts arise.
    7. Preview and iterate to achieve your desired layout.
Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Kadence Header Image’ is closed to new replies.