Topic on Skin talk:Chameleon

Hello,

sorry to bother again but I am having a minor issue that I am not able to solve by myself. After clicking on a page section title using the ToC, I am correctly linked to the section but the navbar overlaps the heading of the section and also the first line. How do I solve this? Here it is an example. I guess this is a really simple setting to adjust...

Thanks very much,

Lorenzo

Unfortunately it is not at all simple. The navbar is a fixed element, i.e. it is removed from the normal document flow and shown at the top of the screen. When following the link to an anchor (e.g. the links in the TOC) the browser positions the linked element also at the top of the screen. I am not aware of any simple solution to the problem. https://github.com/twbs/bootstrap/issues/1768 has several approaches, but I'd have to think about how to fit them in a skin where the height of the navbar is not known and may even change depending on the screen size. https://github.com/twbs/bootstrap/issues/1768#issuecomment-46519033 seems to come close. Maybe you can use some variation of it on your page.

This seems to do the trick for your page (and even seems to work on mobile devices):

.mw-headline[id]::before {
   display: block;
   content: " ";
   margin-top: -32px;
   height: 32px;
   visibility: hidden;
}

oh, I thought it was easier. Anyway your code works well for me (I have just edited the margin-top value), thanks very much! I had the same problem with references anchors and I solved using this (for those who are interested):

sup.reference[id]::before {
 display: inline-block;
 content: " ";
 margin-top: -65px;
 height: 65px;
 visibility: hidden;
}

Many thanks again!
Cheers,
Lorenzo