Как изменить положение этого стиля навигации?

Question

Вот ссылка на набор навигационного стиля:

http://tympanus.net/Development/ArrowNavigationStyles/

Пожалуйста, прокрутите страницу вниз до последнего стиля «Fill Path».

Я хочу изменить положение стрелок навигации, нажимая каждый из них больше на край контейнера.

В строке 924 файла component.css, есть это правило:

.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 */ 
} 

Очевидно, что я должен изменить свойство «left» здесь стрелки для перемещения. Но когда я меняю его, например, на 80%, одна стрелка приближается к краю (который я хочу), а другой - от его края. Как это правило должно быть отредактировано для того, чтобы стрелка была нажата на соседний край?

Answer 1

Просто уменьшите ширину .nav-fillpath класс css.

.nav-fillpath{ 
     width: 100px; /* decrease this width */ 
     /* other css properties */ 
} 

Чтобы придать текст некоторого пространства от навигационных иконок, дает запас по сторонам .nav-fillpath h3.

.nav-fillpath h3{ 
    margin: 0px 30px; /* remove margin: 0px; */ 
} 

Answer 2

Вы можете шанс right и left из .next и .prev:

nav a.next { 
    right: -35px; 
} 

nav a.prev { 
    left: -35px; 
} 

Answer 3

попробовать это:

.nav-fillpath .prev { margin-left:-80px;}