响应式网站上的WP元素放置

Question

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

http://brettcolephotography.com/sites/sra/

基于这个主题

http://themes.danyduchaine.com/mission/

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

1. 向左移动导航到左边缘以腾出空间。这种变化表现良好。
2. 为徽标添加了嵌套的div结构，使用css指针事件来解释div分层以及我的方法出现的点击问题

HTML

<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>

CSS

#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;}

总的来说，它远远达不到目标。出现的问题是：

1. IE与指针事件的兼容性。我坦率地不理解我在这部分中看到的任何javascript替代品，但我不确定是否有另一种选择或者我是否面临兼容性问题。我在IE10中试过它看起来很好。
2. 在移动尺寸下，出现的白色移动导航框（响应式主题）位于徽标下，无论我尝试什么，我似乎都无法改变。

我完全接受不同的方法，或者对如何使我迄今为止所做的工作100％的工作有所了解。非常感谢。