Add floating post navigation using GP Hook Element

GP - Floating Post Navigation

// HTML and PHP 
// This is hooked into after_header hook with execute PHP

<div class="floating-post-nav">
    <div class="float-link prev">
        <?php previous_post_link('%link', '%title', true ); ?>
        <div class="floating-arrow">
            <svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path></svg>
        </div>
    </div>
    <div class="float-link next">
	<?php next_post_link('%link', '%title', true ); ?>
        <div class="floating-arrow">
            <svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg>
        </div>
    </div>
</div>

// CSS below

/* Floating Nav Container */
.floating-post-nav {
    position: fixed;
    top: 50%;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* Float links wrapper */
.float-link {
    display: flex;
    align-items: center;
    min-height: 60px;
}

/* Style Link */
.float-link a {
    display: block;
    max-width: 150px;
    padding: 20px;
    max-width: 250px;
    position: absolute;
    opacity: 0;
    transition: all 0.3s;
    background-color: #ff0000;
    font-size: 12px;
    color: #fff;
}

/* Style Arrow */
.floating-arrow {
    padding: 15px 10px;
    opacity: 0;
    cursor: pointer;
    background-color: #ccc;
}

/* Position links off screen */
.float-link.prev a {
    left: -9999px;
}

.float-link.next a {
    right: -9999px;
}

/* Transition links on screen on hover */
.float-link.prev:hover a {
    transition: all 0.3s;
    opacity: 1;
    left: 0;
}

.float-link.next:hover a {
    transition: all 0.3s;
    opacity: 1;
    right: 0;
}

/* Display arrow only if link exists */
.float-link a+.floating-arrow {
    opacity: 1;
}

/* Hide floating nav on smaller screens */
@media (max-width: 769px) {
    .floating-post-nav {
        display: none;
    }
}