Archived topic
Make entire site title clickable
5 replies · Started by Randy on December 9, 2022
I am trying to make the entire site title area clickable. I am referring to this element: <p class="main-title"...
I am using an ::after pseudo element to place a second line of text in the site title using a different font size.
However, that second line is not clickable to take you to the homepage.
How would I make the entire class="main-title" clickable or even the entire class="navigation-branding" element if that's easier?
Note that I am using the "Use Navigation as Header" option in the customizer, in case that makes a difference.
Link shown below
Thanks!
Hi there,
try adding this CSS:
.navigation-branding {
position: relative;
}
.navigation-branding a:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}it will make the entire branding container clickable.
Thanks David! It works perfectly!
Can you briefly describe how using "a:before" with empty content string is making the entire navigation-branding clickable?
I tried searching how this works, but couldn't really find anything that seemed applicable.
Yeah for sure ... well ill try lol.
So element:before or element:after are pseudo elements.
When you add a content property to them, even if it is empty, the browser creates a fake child element for the parent.
As in this case ie. a:before the parent is a link, so the child within also becomes clickable.
We then absolute position it relative to the branding container to fill that space.
Very cool! Really appreciate the help and explanation!
You're welcome
