search

econchick / new-coder

New Coder tutorials
zlib License
597 stars 392 forks source link

Styling of html headers creates overlap of box-models #194

Open dradickal opened 8 years ago

dradickal commented 8 years ago

The header style in custom.css creates an overlap with the text above it. In some cases, depending on the content, it prevents links from being clickable.

newcoder

Below is the offending style:

/*Hacky way to make sure anchors are pushed down because of the sticky navbar*/
h1[id], h2[id], h3[id], h4[id], h5[id] {
  padding-top: 70px;
  margin-top: -70px;
  display: inline-block; /* required for webkit browsers */
}

Using the :before tag allows you to adjust the headers height, but the width: 0; keeps links clickable!

h1[id]:before, h2[id]:before, h3[id]:before, h4[id]:before, h5[id]:before {
  content: ' '; 
  display: block; 
  position: relative;
  width: 0; 
  height: 70px; 
  margin-top: -70px;
}