Kadence Header Image

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

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.

Hey there,

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

Best,
Chito

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

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

Chito,

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

Thank you.

Scott

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

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.