Change single post nav to chevrons

(Pardon my English, I'm Dutch!)

I bought a theme for my website, but I can't solve the next problem:

The default theme has an option to switch between single posts. But it doesn't work properly though, so I want to change it.

This is a preview as it is right now (the default theme). This is an example of what I want (but with chevrons).

I want to get rid of this standard navigation. Instead I want chevrons on either side of the website:

- Left chevron = newer post

- Right chevron = older post

- When there is'nt a newer or an older post, there is no chevron

- It has to be within the same category

- The chevrons need to be placed in the middle of the screen (fixed) on the left and right side

- The chevrons need to move while reducing the window. They need to disappear under 800px width

This is the code as it is right now:

<?php if ( $ti_option['single_nav_arrows'] == 1 ) { // Show/Hide Previous Post / Next Post Navigation ?>
<nav class="single-box clearfix nav-single">
<?php
$prev_post = get_previous_post();
$next_post = get_next_post();

if ( !empty( $prev_post ) ){
?>
<div class="nav-previous">
<?php previous_post_link ( '%link', '<i class="icon-chevron-left"></i><span class="sub-title">' . __( 'Nieuwer', 'themetext' ) . '</span><br />%title' ); ?>
</div>
<?php } ?>

<?php if ( !empty( $next_post ) && !empty( $prev_post ) ) { ?>
<span class="sep"></span>
<?php } ?> 

<?php
if ( !empty( $next_post ) ){
?>
<div class="nav-next">
<?php next_post_link( '%link', '<i class="icon-chevron-right"></i><span class="sub-title">' . __( 'Ouder', 'themetext' ) . '</span><br />%title' ); ?>
</div>
<?php } ?>
</nav><!-- .nav-single -->
<?php } ?>
 

This is the CSS as it is right now:

/* The Next and Previous post links */
.nav-single {
padding:30px 0;
position:relative;
border-top:3px solid #000;
border-bottom:1px solid #000;
}
.nav-next,
.nav-previous {
width:36%;
padding:0 7%;
text-align:center;
}
.nav-next {
float:right;
}
.nav-previous {
float:left;
}
.nav-next a,
.nav-previous a {
font-size:12px;
display:block;
font-weight:bold;
text-decoration:none;
text-transform:uppercase;
}

.nav-next [class^="icon-"],
.nav-previous [class^="icon-"] {
font-size:25px;
position:absolute;
top:50%;
margin-top:-14px;
}
.nav-next [class^="icon-"] {right:0;}
.nav-previous [class^="icon-"] {left:0;}

.nav-single .sep {
display:block;
position:absolute;
top:0;
left:50%;
width:1px;
height:100%;
border-left:1px dotted #444;
}
 

Is it possible to change the existing code for what I want, or do I need to replace it?

I hope that someone can help me with this! Thanks in advance!

Edited August 28, 201312 yr by Ovyx