Discover a unique collection of navigation styles by following this link:
http://tympanus.net/Development/ArrowNavigationStyles/
Be sure to explore the final style "Fill Path" at the end of the page.
I'm interested in adjusting the position of the navigation arrows, moving each one closer to the edge of the container.
In line 924 of the component.css
file, you'll find the following rule:
.nav-fillpath a::before,
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
position: absolute;
left: 50%;
width: 3px;
height: 50%;
background: #566475;
content: '';
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
outline: 1px solid transparent; /* for FF */
}
To move both arrows towards their respective edges, I need to modify the "left
" property. However, when I change it to 80%
, only one arrow moves closer while the other moves away. How can I edit this rule so that both arrows are pushed closer to their adjacent edges simultaneously?