[Resolved] How to make logo clickable with merged elements

[Jason]

Per David: New thread for follow up question to:
https://generatepress.com/forums/topic/what-is-block-type-site-header-and-how-do-we-use-it/

I followed the info on the thread above and got a header working with blocks. My only issue is that while my logo is clickable to the Home Page if I use the block only element but I set the merge on the header element to add the menu is it no longer clickable.

How do you make it so that the image is clickable once the two elements are merged?

The config:
A Block-Hook element set to generate_after_header with a generateblock containing a shape and logo.
A Header element set to merge to overlay the main menu.

I added a Home item to the menu to have a link but would like to get the logo clickable. I have a sticky menu configured and the logo is clickable when you scroll so obviously I would like both to match.

David, you mentioned it may be a z-index issue but do not see how to change that for Header.

Thanks, Jay!

[Elvin]

Hi,

As David mentioned, it is a z-index issue but its a bit more complicated than that.

The problem here is, the <div class="header-wrap"> is blocking the logo link which is added within the GB block that adds the shape.

But this can’t be solved by simply adding z-index to the GB container containing the shapes because doing so would prevent the menus from being clickable.

That said, we can try this:

Duplicate the logo placed in the GB container. Add “logo-link” class to the 1st logo and add “logo-placeholder” class to the duplicate.

That said, consider doing this approach.

1.) Keep the logo from the default header. (remove the custom CSS that set display:none to it, if any)
2.) Create 2 Block Elements separating top shape and bottom shape.
3.) For the Block Element with the Top shape, hook it on generate_before_header_content
4.) For the Block Element with the Bottom shape, hook it on generate_after_header_content
5.) You then set the <header>’s position to relative. (Done in CSS)
6.) For the top shape, set it to position: absolute; top: 0; (Done in CSS)
7.) For the bottom shape, set it to position: absolute; bottom: 0; (Done in CSS)

Steps 1-4 are done within the UI.

For Steps 5-7, if you need assistance for the CSS write-up, let us know.

[Jason]

Elvin,

Excellent, thank you, almost there.

I got 1-4 done ok and changing the top\bottom padding on the shapes got the bottom shape in place, the logo now clickable and the top shape close. I cannot reduce the top white space any more.

I assume the CSS that you said I need fixes that? Can you help with that? I am not sure what to put, thank you!

(CSS noob, looked through docs to at least try figure it out but still not quite getting it yet.)

[Ying]

Hi Jason,

Try this css:

.site-header {
    position: relative;
}

body .gb-container.gb-container-a8b500af {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 99;
}

body .gb-container.gb-container-e7681649 {
    position: absolute;
    left: 0;
    width: 100%;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

The last, there’s a paragraph with bottom margin below the shape in each of the gb container, delete them the white space will be gone.

Let me know 🙂

[Jason]

Ying,

Thank you, works perfectly and thanks for finding the extra paragraphs.

For future reference, how do I find reference like gb-container-a8b500af to use in styles? Is that just looking via chrome dev tools after it is created?

[Ying]

Hi Jason,

Glad to hear it works!
Yes, I just use the chrome dev tools 🙂

[Jason]

Thanks again to all on the support team for the help to get this working, much appreciated!

[Ying]

You are welcome!
Happy holidays 🙂

[Author]

Posts