Если же вся анимация прописывается через CSS, то можете ли вы подсказать как можно повторить подобный эффект?
background: url(... .svg) center no-repeat;<svg width="1200px" height="260px" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1200" height="260">
<image xlink:href="http://cdn.wall-pix.net/albums/people-models/00030952.Sao.Paulo.Indy.300.jpg" x="0" y="0" width="1200" height="260" />
</pattern>
</defs>
<polygon
points="40 200,40 40, 1160 40,1160 200, 580 250, "
style="fill:#img1; fill-opacity:0.5; stroke: black;" />
</svg>.navbar-collapse.collapse.in {
display: block!important;
}position: fixed\absolute; top: 0; bottom: 0; left: 0; width: 50px;transform: skewX(20deg) translate(-50%, -50%);transform: ... skew() rotate() translate() .... ;transform: skewX(20deg); перебивает transform: translate(-50%, -50%);
ul внутри которого размещаются li, а уже внутри них ссылки могут быть!href="http://link...":active, :focus задается, соответственно, ссылкам a, а не li
:before и ему задается z-index: -1, либо h1 { ... position: relative; z-index: 100; ... }