as a link to home

Hi there,

Any chance you can link us to the site in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

Thx a lot for your friendly reply!
Please have a look at my posting in the private information field.

Any reason why you are not adding that image as the site logo?

I have tried – but the logo would be much to small and in the wrong place: as part of header and not of page hero. Of course I could use position and width via CSS. But then the quality of the pic will be extremely poor.

I would like to use the bigger pic as page hero. Shouldn't it be possiblbe to connect a link to a div-tag? Unfortunately I can't manage that as easy as in the blocks: Global Page Header and other standard elements don't seem to be flexible enough to get along without additional code.

But perhaps you have the right idea to help me?

Adding the logo should be the best solution.

Can you add it as the logo so I can see the issue?

Done!

But the result doesn't satisfy me, although I have added individual CSS:

.site-logo {
	position: absolute;
  top: 3.9em;
  width: 59%;
}

This method seems to work just at first sight: The pic won't cover the needed place, if you scroll or use a smaller screen.

You might compare the logo with page hero, because I have left over the old settings.

Could it be possible, that the way via the logo is a little bit uncomfortable? You're surely right, that the desired link is integrated. Otherwise the new version looks strange. The logo doesn't fit to the navi and the header.

In my eyes the configuration with page hero appeals to be attractive. GeneratePress offers a great tool to build elements like page headers. However I miss the opportunity to set links in these places. CSS doesn't help anything in such cases. Can I reach my objectives by using JavaScript? Any idea, how I could act? Do you suggest a plugin for that job? Or am I totally wrong?

Hi there,

If I may offer an alternative, we can turn the whole page-hero (Header element) into a clickable link just with simple HTML and CSS.

First, add this on your Header element's code area.

<a href="/" class="hero-link"></a>

This simple HTML code goes before the actual content if your Header element code area. (if it has one)

and then add this CSS:

.page-hero {
    position: relative;
}

.page-hero a.hero-link {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

check this page - https://dev-generate-press.pantheonsite.io/a-demo-for-stefan/

This concept should give you an idea to work on.

The whole page-hero area is a link. I didn't add an image but you can do that easily by adding a background image on it. :D

Great! Fantastic! That's it!

I just had to modify CSS in a particular point:

.page-hero.hauptelement {
  background-size: contain;
  position: relative;
}

Now everything works better than I ever could imagine. I'm so glad, that I don't have to improvise with JavaScript. I slowly realize all the capabilities of elements in GeneratePress.

Thanks a lot for your patience and your help.

No problem. glad to be of any help. :D

Awesome!