Problems creating vertical menu at left side

Hello,
I hope you can help me with this problem.
I need to convert my header as a left custom menu-bar/header area.
I've installed a new fresh-installation (in a demo site) importing one of the generate press demo with that design.
there i've seen the css in the template.

In my production website, i finally could add a left space... but there appear the logo and the webtitle... The menu bar didn't stay in that bar, it still on the top.

I want to insert in that (white) space my own creation with elementor... but i don't understand how to eliminate all in that left-sticky space to insert elementor designs.

(i've seen that i can't create an elementor header because it appear at top, in an standar situation not in that new white column)

Can it be done?

I've browsed along the internet: youtube, google, your website, but i did'nt find what i'm searching for.

I've seen that GP 'elements' can work with header... but when i create an option with an elementor element (with a sortcode), it appear on the top of the image, not at left in the white space

Please, can you bring me any kind of help?

Thanks in advance.

Xavs

the code i'm using to obtain that left space is:
(i think it's not excactly your provided by the template.... but 95% exact)

/* GeneratePress Site CSS */ @media (min-width: 1000px) {
	body {
		padding: 0px 0px 100px 100px;
		margin-left: 100px;
	}

	.site-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 200px;
		z-index: 100;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
	}
	
 .admin-bar .site-header {
		top: 32px;
	}
	
.site-header .main-navigation li {
		float: none;
	}
}

.inside-header {
	display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

.site-branding,
.site-logo {
	order: 1;
}

.header-widget {
	order: 3;
}

.nav-float-right .inside-header .main-navigation {
	order: 2;
	float: none;
	margin-top: 30px;
	margin-bottom: 50px;
}

.nav-float-right .header-widget {
	float: none;
	top: auto;
	max-width: 100%;
}

#menu-social-sider li {
	display: inline-block;
	margin: 0 10px;
}

.dropdown-click .site-header .main-navigation ul ul {
    position: relative;
}

a.button,
a.button:visited,
button,
input[type="submit"] {
	border-width: 1px;
	border-style: solid;
	border-color: inherit;
}
.mc4wp-form-fields input {
	margin-bottom: 10px;
	width: 100%;
	text-align: center;
}

.single .entry-header::after,
.page .entry-header::after{
    border-bottom: 1px solid #000;
    content: "";
    display: block;
    margin-bottom: 40px;
    padding-bottom: 40px;
    width: 2.5%;
}

.main-navigation.toggled .main-nav li {
	text-align: center !important;
}

::-webkit-input-placeholder { 	text-transform: uppercase;
	font-size: 14px;
}

::-moz-placeholder {
	text-transform: uppercase;
	font-size: 14px;
}

:-ms-input-placeholder {
	text-transform: uppercase;
	font-size: 14px;
}

:-moz-placeholder {
	text-transform: uppercase;
	font-size: 14px;
}

@media (max-width: 768px) {
	.separate-containers .site-main {
		margin-top: 20px;
		margin-bottom: 0;
	}
	
	.post {
		margin-bottom: 20px;
	}
	
	.inside-header {
		padding: 30px;
	}
	
	html:not(.mobile-menu-open) .header-widget {
		display: none;
	}
	
	.nav-float-right .inside-header .main-navigation {
		margin-top: 0;
	}
	
	.nav-float-right .inside-header .main-navigation:not(.toggled) {
		margin-bottom: 0;
	}
} /* End GeneratePress Site CSS */