0

I have a premium theme site in dev here

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

based on this theme

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

The theme comes with an odd logo placement, you can see, the little black circle. Client needed it to be in the left of the nav. I've implemented this solution

  1. Moved the nav over to the right with margin-left to make room. This change behaves well.
  2. Added a nested div structure for the logo, using css pointer-event to account for the div layering and the click-through issues that arise with my approach

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

Overall it gets pretty far to the goal. The issues that arise are:

  1. IE comptability with the pointer-event. I frankly don't understand any of the javascript alternatives I've seen for this part, but am not sure if there's another alternative or if I am facing compatibility issues. I tried it in IE10 and it seemed fine.
  2. At mobile size the white mobile nav box that appears (responsive theme) is under the logo and I can't seem to change that no matter what I try.

I am open to different approaches altogether or insights on how to make what I've done so far work 100%. Many thanks.

4

0 回答 0