我一直在做很多关于这个主题的研究,并且已经找到了相当多的类似答案/解决方案,但没有具体针对我的情况。
这是我的开发服务器:http://blmprinthouse.com/summit_sustainability/
我将Bootstrap集成到我的Wordpress导航中。我修改了Bootstrap文件,以便在桌面上(任何超过776px宽度),下拉列表出现在悬停状态。此外,我已启用顶级链接,将您带到实际页面,而不是像正常一样显示下拉菜单。长款短裤,在776px以上完美搭配。
这将我们带到手机/平板电脑。我试图保持顶级链接可点击链接,而点击时自己的插入符号理想情况下将下拉菜单。我已经看到这被提到是一个UI / UX难题,我可以看到这一点,但我已经做了更大的插入并正确对齐它们以简化用户体验。
在我的wp_bootstrap_navwalker.php中,我找到了一种方法来分离顶级链接和插入符号链接,但这是我已经得到的,因为点击插入符号什么也没做。这可以通过更改此行来完成:
$item_output .= ( $args->has_children && 0 === $depth ) ? '<span class="caret"></span></a>' : '</a>';
对此:
$item_output .= ( $args->has_children && 0 === $depth ) ? '</a><a class="dropdown-toggle"><span class="caret"></span></a>' : '</a>';
我暂时删除了这个^,因为它会导致一些对齐问题,但是如果有人有任何关于我如何使照片可点击以显示各自菜单项的下拉菜单的想法那么会很棒。谢谢!