Kepp floating nav under masterhead logo

Dear WP-Community,

I have lately agreed to help a friend with the desgin of his wordpress based website.
As I´ve always been interested getting some skills in web developement this has been a great opportunity.

Starting over I´ve tried to get some information about coding standards which worked great with wordpress codex.

My first steps included creating a childtheme with a custom functions.php, style.css and even a custom page-template.

I am currently trying to provide a floating navigation menu on the left side.
Which is actually not that bad if seen on any non front-page page.
Getting my navigation displayed on the static front-page really had me thinking for some time until I read a thread regarding the way wordpress handles font-page.php and home.php.

However I do get menu displayed on the front-page now (using a front-page.php).
As opposed to the other pages, I am really having some trouble here.
Just like the default Top-Navigation, I´d like my nav to only be visable after that giant Front-Page logo.
Whatever css I try, it just keeps floating over the logo.

Today I found that there is some js for the navigation-top chaning the css selectors once the viewport reaches a special point.

As I can barely read js and couldn´t pdouce a single line of code I really hope there is a solution for my problem using css.

Any help appreciated.

/*style.css*/
.nav-left{
	position: fixed;
	margin-left: 100px;
        top: 25%;	
}

.nav-left ul{
	list-style: none;	
}

.nav-left ul li{
	background-color: gray;	
	text-align: left;
	margin-top: 2px;
	
}

.nav-left ul li:hover{
	background-color: black;	
}

.nav-left ul li a{
	color: white;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 2px;
}

.nav-left ul li.menu_logo{	
	background-color: white;
	height: 190px;
	width: 190px;	
	background-image: url('http://localhost/public/menu_logo.jpg');
	background-repeat: no-repeat;
	background-position: left;
	background-size: auto 100%;
}

#functions.php
<?php

function load_2018_FK() {

    $parent_style = 'twentyseventeen-style'; 

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'load_2018_FK' );

function reg_custom_menus() {
	register_nav_menus(
		array(
			'left_nav_menu' => __( 'Left Navigation' ) ,
			'footer_nav_menu' => __( 'Footer Naviagtion' )
		)
	);
}
add_action( 'init', 'reg_custom_menus' );

#front-page.php
<?php
/**
 * Template Name: Default Layout with Navigation on left side
 * Template file for pages with small content area and navigation on left side
 *
 *
 * @package WordPress
 * @subpackage 2018_FK
 * @since 1.0
 * @version 1.0
 */
error_reporting(E_ALL);
ini_set("display_errors", 1);
get_header();
wp_nav_menu(
	array(
		'theme_location' => 'left_nav_menu',
		'container_class' => 'nav-left'
	)
);
?>
<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
			
			<?php
			while ( have_posts() ) : the_post();

				get_template_part( 'template-parts/page/content', 'page' );

				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) :
					comments_template();
				endif;

			endwhile; // End of the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();