PHP将首页徽标链接到首页（来自wordpress.org的预制主题）

Question

I have researched and looked into the forums already but none seem to be faced with what I'm dealing with.

I'm trying to link my company's logo to the home page...but when I inspect the logo element it says it's already linked to the home page but the logo isn't clickable.

I've looked into functions and I can't find "business_kit_the_custom_logo"

Below is header.php regarding the logo and site branding. link to site is: https://curvetrace.testfixtures.com/

 <div class="bottom-header">

        <div class="container">

            <div class="site-branding">

                <?php echo business_kit_the_custom_logo(); ?>

                <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

                <?php
                $description = get_bloginfo( 'description', 'display' );

                if ( $description || is_customize_preview() ) : ?>

                    <p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>

                    <?php
                endif; ?>
            </div><!-- .site-branding -->

Answer 1

The paragraph with the class "site-description" is overlapping your logo, so when you click the logo you're actually clicking that paragraph. Hover your mouse over the bottom half of your logo and you can see that it is indeed clickable where the paragraph doesn't overlap it. If you disable the styles for that paragraph your whole logo and the text above that paragraph are clickable. See image.

Answer 2

The sites .site-description paragraph is overlapping the content:

to fix this, change this style:

.site-description {
    padding-left: 31px;
    font-size: 22px;
    left: 16px;
    margin-left: -18px;
    position: relative;
    top: 0px;
}

to this: (Note that I've used a left padding of 114px to re-align the P element).

.site-description {
    padding-left: 114px;
    font-size: 22px;
}

Now, for mobile responsive, I've changed the padding-left to 24px and overridden the default padding using !important and removed again the positioning styles:

@media screen and (max-width: 551px)
{
    .site-description {
        padding-left: 24px !important;
        float: left;
        font-size: 20.5px !important;
        font-family: garmond;
    }
}