Javascript WP元件在响应现场的放置

我在这里有一个高级主题网站

基于这个主题

这个主题带有一个奇怪的标志位置，你可以看到，黑色的小圆圈。客户需要它在导航的左边。我已经实现了这个解决方案

将导航移到右边，留有空白以腾出空间。这种变化表现良好

为logo添加了嵌套的div结构，使用css指针事件来解释div分层和我的方法中出现的点击问题

html

总的来说，它离目标相当远。出现的问题是：

IE与指针事件的兼容性。坦白地说，我不了解我在这一部分中看到的任何javascript替代方案，但不确定是否还有其他替代方案，或者我是否面临兼容性问题。我在IE10中试过，看起来不错

在手机尺寸下，出现的白色手机导航框（响应主题）位于徽标下方，无论我如何尝试，我似乎都无法改变

---

对于如何使我迄今为止所做的工作100%发挥作用，我完全愿意接受不同的方法或见解。非常感谢。

谢谢，乔希，我在这里试试。我看到这里解决了很多更复杂的问题。我想从中学习。你使用的是固定定位，这就是为什么徽标以较小的尺寸重叠在菜单上。看起来您正在修改主题的模板文件，如果主题有任何更新，并且您将其更新为新版本，则模板文件可能会被覆盖。但如果您在默认主题文件之外执行此操作，例如创建自己的唯一命名模板文件，则这可能不是问题。既然您愿意修改HTML，为什么不找到生成

.sliderLogo

DIV及其内容的代码段，并将其放在

.mainNav

DIV之前呢？

<div id="bc-masthead">
<div id="bc-logo">
<div id="bc-logo-img"><a href="http://brettcolephotography.com/sites/sra/"><img src="http://brettcolephotography.com/sra.png"   /></a></div>
</div>
</div>

#bc-masthead {position: fixed; top: 0px; left: 0px; height: 40px; width: 100%; pointer-events:none; z-index: 9999999 !important;}
#bc-logo {max-width: 930px; margin-left: auto; margin-right: auto; text-align: left; position: relative; top: 7px; pointer-events:none;}
#bc-logo-img {width: 205px; pointer-events: auto;}