Issue with Logo Left Menu Below (Sticky & Alignment)

Hello,

I have been using UberMenu on my popular travel blog https://www.bigboytravel.com/ but am looking to get away from it to start using the functionality that is now built into Enfold. I plan on adding images to the menu later, but for now just want to get the base functionality similar to what my main site currently is. Link to my staging site using Enfold’s AVIA Menu in the private info.

Issue #1 – Logo Left Menu Below Align Right
I have my menu aligned right with UberMenu but when switching to Enfold’s AVIA I am finding it difficult.
Have tried a number of solutions from the Support Forum including this one and none seem to work

.menu-main-menu-container {
float: right;
}

Issue #2 – Only Menu Sticky On Stroll, Hide Logo Container
I set the menu to sticky and shrinking then added the following CSS but it seems to only occasionally work.
On some pages it works, others after a second, and others not at all.
Overall seems to work on half the pages on Chrome but doesn’t work on most pages in Firefox or Edge.

.header-scrolled #header_main .av-logo-container {
    display: none !important;
}

Issue #3 – Down Arrow Character On Main Menu Parent With Child
On my main site, Ubermeny puts a down arrow character ^ next to any parents with a child. Is this possible using Enfold’s Avia Menu on Desktop like the mobile menu does?

Issue #4 – On Mobile Set Header Background Color And Sizing
to get the header looking how I want on mobile using I have the following code which is working great but wanted to see if any of it looked unnecessary as I’m trying to use as little CSS as possible. Google’s new guidelines are to use 50kb or less of CSS and the dynamic Enfold CSS doesn’t seem to get compressed with my Caching as the CSS elsewhere in my site.
Basically this code makes my header shorter on mobile, sticky when scrolled, filled with a black background, have a smaller logo, and overall tighter to the top, just didn’t know if my code was overkill.

@media only screen and (max-width: 990px) {
#header{position: fixed !important; }
}
@media only screen and (max-width: 990px) {
.responsive #top #main { padding-top: 60px!important; }}

@media only screen and (max-width:990px) {
	#top #header_main > .container {
    	height:70px!important;
    	line-height: 50px!important;
    	max-height: 70px!important;
	}
	.html_header_top.html_header_sticky #top #wrap_all #main {
    	padding-top:60px!important;
	}
}

@media only screen and (max-width: 990px) {
.responsive .logo img {
    max-height: 60px;
}
}

@media only screen and (max-width: 990px) {
.responsive #top {
    margin-top: -5px;
}
}

@media only screen and (max-width: 990px) {
#header.header_color {
background-image: none !important;
background-color: #000000 !important;
}
}