Make element clickable

Hi there,

<a> tag needs to be inside <h1> tag and I would also recommend using a class like this:
<h1 class="mobile-header-content"><a href="https://HOME-PAGE-URL">My Text</a></h1>

Then target with CSS:

h1.mobile-header-content {
    font-size: 20px;
    color: #000;
}

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

Let me know if this helps :)

Hi Leo,

Thanks for your response!

Oh yeah stupid of me, I did try that first (the < a > inside the <h> tag), but that didn't work either (same issue: the styling got neglected) so I changed it to the latter to see if that would do the trick.

Anyway, reading your reply I'd hoped that the reason for it not working was the fact that I applied styling "locally" (is that what it's called?) in stead of creating a class to style in CSS, BUT sadly, the styling still gets neglected when targeted as a class and added to Additional CSS...

Inline style should also work. But using a class is just the neater approach :)

Glad it's working!

Hi Leo,

Sorry for being unclear.

In fact it is not working...

Styling still gets neglected.
Not all of it though. The padding does seem to work. Color and font size however, not so much.

I already tried adding !important to those parts of the styling, but no luck so far.

When I remove the <a tag, the styling is fine. As soon as I add in the <a the text shrinks and turns another shade... it seems something in the <a tag is overriding any other styling..? Really weird.

Any other ideas?

Cheers, Coen.

nope... it doesn't work either way

Sorry I misunderstood before.

Can you apply the class and CSS method and let me have a look?

No worries!

Sure thing

That's how it currently is.

So to be clear, in the current state is has styling via class and CSS and a < a > tag added.

The styling is not how it should look.

If I remove the < a > tag (just let me know and I'll do it for you) the text blows up to the size it should be and turns the color it should be.

This is what's in the element editor:

<h1 class="mobile-header-content">
Coen Modder
</h1>

This is what's in CSS:

h1.mobile-header-content {
text-transform:none;
font-weight:400;
padding:5%;
padding-bottom:4px;
padding-left:7%;
color:#a2a2a2;
letter-spacing:0px;
}

Hmm I can see the styles applying correctly:
https://www.screencast.com/t/DSLrEbAp

Your HTML structure for the <a> tag is wrong though. Try my format above and make sure to replace HOME-PAGE-URL with the actual URL of your home page.

Nope, no luck.

HTML structure was exactly as you'd described I think, or am I overlooking something?

<h1 class="mobile-header-content"><a href"http://coenmodder.kinsta.com">
Coen Modder</a></h1>

The reason for me to not spell out the entire URL is I'd have to change it later to the actual domain (only staging now). Shouldn't make much of a difference I think? (as it doesn't seem to do)

.

You are missing = sign in <a> tag. Best to make it correct for now and change it later.

Sorry I'm unable to view Dropbox images as I'm travelling in China...

What styles aren't applying specifically?

You are missing = sign in <a>

Oops, stupid! :) sorry for that.

It did not correct the styling when I fixed that though..

What does not work:

Font size is brought down (h1 looks way bigger normally, when the a tag is added it shrinks down for some reason). When I add a bigger font size via CSS (font-size: 20px; or even 30px; for instance) it's completely neglected.

(Font) color doesn't work either. Seems to just set to default black when the a tag is added in element editor, even though I specifically style it to #a2a2a2; which is a lighter -grey- tint.