Site logo

[Resolved] Make entire site title clickable

Home Forums Support [Resolved] Make entire site title clickable

Home Forums Support Make entire site title clickable

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2455927
    Randy

    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!

    #2456168
    David
    Staff
    Customer Support

    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.

    #2456217
    Randy

    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.

    #2456231
    David
    Staff
    Customer Support

    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.

    #2456250
    Randy

    Very cool! Really appreciate the help and explanation!

    #2456785
    David
    Staff
    Customer Support

    You’re welcome

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.