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.

maybe have a look at: https://pureinstall.webers-testseite.de/dot-navigation-with-colored-sections/
here are all icons the same – but if you like these could be different

on very small screens the dot-nav goes to the bottom.

i can not see how the example page looks like – no chance to open it on my end her. Maybe there is no valid cert to open it with https.

inside this container you selected there is the anchor (a-tag) and inside this the logo file itself ( depends on your logo format: img or an inline svg)
so try the selector: #header .logo img or if you are using svg files : #header .logo svg

next you do not need to use the switch point to hamburger for that rule.
you can use the media query – when you need it f.e.:

@media only screen and (max-width:479px) {
  #header .logo img {
    transform: scale(0.8);
    transform-origin: center left;
  }
}

Leerzeichen : das zwischen Wörtern, oder meinst du Umbrüche?
Wie sieht es in der Media Library aus? Kannst du dort Beschriftungen oder Beschreibungen mit Leerzeichen einfügen?

or use normal html details / summary:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_details

<details>
<summary>read more …</summary>
 <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

PS : there are some ways to animate that details use.

Also mit dem iframe popup modus geht es:
https://webers-testseite.de/gallery-with-8-images/

wenn es das ist was gewünscht ist? dann kann ich das nochmal genauer beschreiben.
PS: die Einblendanimation muss allerdings als css hinzugefügt werden. Das war bei mir schon drin.

das hier: $('#header, #footer, #socket, .sidebar').hide();
blendet auf der Portfolio Seite dann alles aus was ich nicht im iframe haben möchte.

Da deine Seite ja auch auf deutsch ist, antworte ich mal auch auf deutsch.
Du hast ja hier eine Verlinkung zu einem Portfolio jeweils. Das heißt du lenkst zu einer Infoseite bezüglich dieses Beitragsbildes um.
Dort könntest Du so eine Bildergalerie anlegen, die genau das hat was Du haben möchtest. Diese Option ist aber nur bei der Bildergalerie gegeben.
Siehe unter Stil Tab – Galerie Stil ” Nur großes Bild – andere Bilder über Lightbox …”
Siehe z.B: https://webers-testseite.de/gallery-with-8-images/
was man jetzt machen könnte, wäre es so zu lassen, und auf den Portfolioseiten so eine Galerie einrichten. Die könnte man per script beim Laden öffnen lassen.

I’m afraid it won’t be that easy without a child-theme postslider.php. The category metas are part of entry-content-header – the rest of the meta info is in slide-meta.
With javascript you can move it there afterwards, but the method of placing it there when it is created would certainly be more elegant.

one thing to mention: the pseudo containers ( before and after ) are part of : entry-content-wrapper
if you handle that container as flex-container they will be part of all definitions.

so i do set them to display:none on that case.
next: i do not work with width setting – on the contrary – I set the column widths to unset ( these columns are the items of the flex-containers.)
next: do not use the equal height option – this could be done bei flex-box layout – and those added containers will be part too of the flex-box.

see here an example page including the css code for it. You see all items will have the same height!

https://webers-testseite.de/flexed/

PS : eventuell postet du mal den Link zu deiner Seite – dann schaue ich mir das näher an.

i have this solution with complete replacement of all menu files in my child-theme shortcodes folder.
All files – because there are in original css rules with !important setting. This is something you could not overwrite with other css.
And inside the js file we had to set a different calculation. Especially the case: if( burger_menu.is(“:visible”) ) had to be set in a different way.

See example page: https://webers-testseite.de/transparent-header/

here are the edited menu files: https://webers-testseite.de/menu.zip

on that testpage – there are two submenus – and it works with full-menu or with second hamburger ( test under 479px)

give to the link or to one of its parents the custom class: noLightbox
( pay attention it is case-sensitive)

next hint: if you got a button and you installed the latest version – the “Link Setttings and Filedownload” indicates the option of button type:
“File Download Button”
in this case on an image – it will be not shown but directly downloaded.

PS : if you only dislike the overlay – you can have lightbox without that by:

.avia_transform a:hover .image-overlay {
  display: none !important;
}

the point is that on emulators ( developer tools of all my desktop browsers ) your mobile menu is sticky and fullwidth on screen width less than 767px.

But on a real mobile device, the header scrolls out of the screen.

It is hard to check – because on most cases – the css rules to make are built with dev tools.

…

First: Do you really need all of them. Fontloading is something that could reduce performance of your website.
Next: My advice is not to use the variable Font that is inside the TypeType CommonsPro folder too – it has all the font-faces that are inside that folder and a file size of 1.8MB
if you can live with light, regualar and bold – i would only take the non italic fonts and upload them to transfonter

the convert as shown above and download it – rename the zip file to f.e.: Commons-Pro

Edit

This is a strange professional font. Normally it always works right away to generate the zip file as a font family. In this case – I first had to open the files in FontLab and have the names (postscript names) regenerated there by Build Names. I then saved these as otf families and uploaded them to Tranfonter.

Now you can see it is ok:

test yourself with: https://webers-testseite.de/commons-pro.zip

Please note, however, that your licensing model must include web font use.