see here with an image : https://webers-testseite.de/popup-gallery/

or simpler by a different font icon

#top .image-overlay .image-overlay-inside::before {
  content: "\E80E" !important;
  font-family: entypo-fontello;
  font-size: 42px;
  font-weight: 400;
}

use that class: go-back-link for styling.

i have on some installations for posts/portfolio on top a goback button with this:

function go_back_button(){
?>
<script type = "text/javascript">
(function($){
  $('<div class="avia-button-wrap avia-button-left goback"><a href="" class="avia-button av-icon-on-hover avia-color-theme-color   avia-icon_select-yes-left-icon avia-size-small avia-position-center "><span class="avia_button_icon avia_button_icon_left " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">zurück</span></a></div>').prependTo('#top.single .post-entry:first');
  $('.goback').on('click', function(e){
      e.preventDefault();
      window.history.back();
  });
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'go_back_button' );

the window.history.back(); can do the job too.
but you can place that manually be each button with that class custom-class : goback
then only use:

function go_back_button(){
?>
<script type = "text/javascript">
(function($){
  $('.goback').on('click', function(e){
      e.preventDefault();
      window.history.back();
  });
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'go_back_button' );

Top Header – Logo left – menu right.
to have on start to all pages first the hamburger active and to generate the widget area – this to child-theme functions.php:

function custom_burger_menu_active( $active, $context ){
	return true;
	return $active;
}
add_filter('avf_burger_menu_active', 'custom_burger_menu_active', 10, 2 );

add_action('ava_after_footer_output', function() {
  echo '<div id="extra_sidebar" class="container_wrap extra_sidebar_color" role="contentinfo" ><div class="container" style="text-align: center; padding: 10px 0 20px">';
  echo do_shortcode("[av_sidebar widget_area='extra_sidebar']");
  echo '</div></div>';
});

this is for social bookmarks a shortcode to place inside a text-widget :

function social_bookmarks_shortcode() {
$social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');
$social = avia_social_media_icons($social_args, false);
return $social;
}
add_shortcode('social-bookmarks', 'social_bookmarks_shortcode');

to use it as : [social-bookmarks]

now goto your widgets and create a new widget area : extra_sidebar
!!! to have on top a free space not to overlap the hamburger icon i placed to that a text-widget on top with an empty div container:

here is the css code: you can fit to your needs the amount of that extra bar:

 .responsive #top #wrap_all #header {
    position: fixed !important;
    height: 100px !important;
  }

.html_header_top #top #header .container {
  width: 100% !important;
  padding: 0;
  max-width: 100% !important;
}

.html_header_top #top #header .main_menu,
.html_header_top #top #header .av-main-nav-wrap,
.html_header_top #top #header .av-burger-menu-main {
  width: 100px;
  margin: 0 !important;
}

.html_header_top #top #header .av-burger-menu-main a {
  padding: 0 !important;
  text-align: center;
}

#top #header_main > .container, 
#top #header_main > .container .main_menu .av-main-nav > li > a, 
#top #header_main #menu-item-shop .cart_dropdown_link {
  height: 100px !important;
  line-height: 100px !important;
}

.header_color .header_bg, 
.header_color .main_menu ul ul, 
.header_color .main_menu .menu ul li a, 
.header_color .pointer_arrow_wrap .pointer_arrow, 
.header_color .avia_mega_div, 
.header_color .av-subnav-menu > li ul, 
.header_color .av-subnav-menu a {
  background-color: transparent !important;
}

.html_header_top.html_header_sticky #top #wrap_all #header {
  box-shadow: none
}

.html_header_top.html_header_sticky #top #wrap_all #main {
  padding-top: 0px !important;
}

.html_av-overlay-side #top .av-burger-overlay-scroll {
  background-color: rgba(0,0,0,0.5) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.responsive #top .av-logo-container .logo {
  display: none !important;
}

#extra_sidebar  {
  display: block;
  position: fixed;
  width: 100px !important;
  height: 100%;
  top: 0;
  right: 0px;
  left: auto;
  background-color: #FFF;
  z-index: 302 !important;
}

#extra_sidebar .container  {
  height: 100%;
}

.html_header_top #top #wrap_all #main {
  width: calc(100% - 100px);
  padding-top: 0px !important;
}

#top #extra_sidebar .avia-builder-widget-area {
  display: flex !important;
  flex-flow: column nowrap;
  justify-content: space-around !important;
  height: 90%;
  padding-top: 250px !important; /*** try your self a good looking value ******/
}

#top #extra_sidebar .avia-builder-widget-area:before,
#top #extra_sidebar .avia-builder-widget-area:after {
  display: none;
}

#top #extra_sidebar .avia-builder-widget-area > * {
  flex: 0 1 auto;
  -ms-writing-mode:tb-rl;
  writing-mode:vertical-rl;
  /*! transform:rotate(180deg); */
}

#top #extra_sidebar .avia-builder-widget-area svg,
#top #extra_sidebar .avia-builder-widget-area img  {
  width: auto;
  height: 70px;
  transform: rotate(90deg);
  transform-origin: top right;
  margin-right: 15px;
}

#top #extra_sidebar .widget ul.social_bookmarks  {
    transform: rotate(90deg) !important;
}

#top #extra_sidebar .widget ul.social_bookmarks li a {
    transform: rotate(-90deg) !important;
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 0px;
  }
}

I don’t know whether existing rules have played a role here. If it doesn’t work right away, please contact me again.