Question

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

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

我的网站：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

你在这里遇到一些奇怪的情况，但我发现如果你将以下样式应用于元素，那么可点击区域将覆盖整个徽标。

<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应用于链接并将logo和z-index定位到徽标将解决问题

WordPress Navwalker：改变Navbar-Brand Clickable链接的大小？

1 个答案: