Try this here:

.av-burger-overlay-inner, .av-burger-overlay-bg {
    background: #fff url("/wp-content/uploads/2015/07/laptop-white.jpg") no-repeat scroll 0 0;
}

.av-burger-overlay-active #top .av-hamburger-inner, .av-burger-overlay-active #top .av-hamburger-inner::before, .av-burger-overlay-active #top .av-hamburger-inner::after {
    background-color: #000 !important;
}

#av-burger-menu-ul li a {
    color: #000 !important;
}

you see that a background-image is possible too !

Result see here: Link

To your point 2) now we have this hamburger – menu if one likes to have it
on that i have to look how to get the logo in that menu –
but on the old offcanvas Navigation there is this code to quick css :

#mobile-advanced {
	background-image: url("path to your logo"); 
	background-position: left top; 
	background-repeat: no-repeat; 
	background-size: 75% auto; 
	padding: 20% 0 !important ;
}

depending on your logo – you have to set up different size and padding – values !

if you want to have your logo on the hamburger menu simply insert the home link twice to your menu and fill in the navigation label of the first one the image link (f.e.: <img src="/wp-content/uploads/Logo_white.png" alt="wpwdweiss" width="400" /> )
it is best to have here an alternative Logo (as on transparent option) that has good contrast to the dark background.

• This reply was modified 9 years, 6 months ago by Guenni007.

To your point 3 try this in quick css (you have to set up your own colors)

@media only screen and (max-width: 767px) {
.responsive #top .avia-post-nav { display: block }
#top .avia-post-next {background:none repeat scroll 0 0 rgba(255,50,50,0.6);top: 65%}
#top .avia-post-prev {background:none repeat scroll 0 0 rgba(50, 100, 255,0.6);top: 65%}
#top .avia-post-nav {height: 60px;margin-top: -55px;padding: 15px}
.avia-post-nav .entry-info-wrap {margin-top: -11px}
.avia-post-nav .entry-info {height: 50px;width: 180px}
.avia-post-nav .entry-image {height: 50px;width: 50px}
.avia-post-nav .entry-info span {display: table-cell;font-size: 13px;line-height: 1.3em;vertical-align: middle}
.avia-post-nav .entry-image img {display: block;height: auto;width: 50px}
.avia-post-nav:hover .entry-info-wrap {width: 200px}
}

i did change the height too – because on mobile it looks strange if those navigations are on normal height.

btw: if you want to change the direction (previous is to the left – next is to the right side) add this to child-theme functions.php:

add_filter( 'avia_post_nav_entries', 'enfold_customization_postnav', 10, 2); 
function enfold_customization_postnav($entries, $settings) {
    $entries['prev'] = get_next_post($settings['same_category']);
    $entries['next'] = get_previous_post($settings['same_category']);
    return $entries;
}