Can someone please take a look at my navigation? http://www.bschug.com It was working just fine now all of the sudden there is only a tiny space that the cursor can activate the link. It’s only happening when the size is over 768px. It appears the h1 tag is overlapping the nav bar, maybe that is why and how do I fix it? Smaller still works fine. Thanks in advance!
You’re using border-box where the total size includes all padding, border, and margin is inside the box. Another way of thinking about it is when I want a given area to trigger something, for example :hover, all padding, border, and margin subtracts from that area. Hovering over the a element triggers a change so padding on the parent li narrows the “click” area of the anchor. Don’t pad the li and all’s well.
FYI I use content-box and pad the anchor to increase the “click” area.