css - WordPress Navwalker : Changing size of Navbar-Brand Clickable link?

Question

有点奇怪的问题。我似乎无法在任何地方找到解决方案。

我在我的 WordPress 网站上使用 Bootstrap navwalker。当使用 navbar-brand 类来显示我的 Logo 并将其链接到主页时，您似乎必须单击 Logo 的某个特定区域(从可用性的 Angular 来看显然不好。)有谁知道如何制作这个可点击区域更大？

我的网站:http://www.franhaines.co.uk/paddlethewye/

我的代码:

 <header>
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="<?php echo home_url(); ?>"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" /></a>
                </div>
                <?php
                wp_nav_menu( array(
                        'menu'              => 'primary',
                        'theme_location'    => 'primary',
                        'depth'             => 2,
                        'container'         => 'div',
                        'container_class'   => 'collapse navbar-collapse',
                        'container_id'      => 'bs-example-navbar-collapse-1',
                        'menu_class'        => 'nav navbar-nav',
                        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                        'walker'            => new wp_bootstrap_navwalker())
                );
                ?>
            </div>    
        
     <div id='phone'>
     <img src='http://www.franhaines.co.uk/paddlethewye/wp-content/themes/BareTheme/images/telephone.png'><a href="callto:01600 890027">01600 890027</a>
     </div> 
</nav>

我不相信我的 CSS 会覆盖任何东西，因为除了导航栏切换之外，我没有改变任何类的宽度/高度。

有人有什么建议吗？干杯。

Answer 1

这里的情况有点奇怪，但我发现如果将以下样式应用于 和 元素，可点击区域将跨越整个 Logo 。

<a class="navbar-brand" href="http://www.franhaines.co.uk/paddlethewye" style="min-width: 250px;">
<img id="logo" src="wp-content/themes/BareTheme/logo.png" alt="Paddle the Wye Logo" border="0" style="position: absolute;z-index: 2;"></a>

将 min-width 250px 应用于链接并将绝对位置和 z-index 应用于 Logo 将解决问题