Hi Victoria,
thanks for helping me out!

The button is now created and i tested with the code your’re providing here: “Menu Centered” but cant find the right modification without destroying the current process with overlapping and so on. :)

I think now I just need to modify this snippet right?

/************************************

 Add a widget area on the right side
 Logo left, Menu center, Widget right

*************************************

CSS Settings:

» Initiate Flexbox
» Topbar
» Header
» Logo
» Menu
» Widget
» Social icons
» Search
» Cart icon

***********************************/ 

/*--------------------------------

» Initiate Flexbox

--------------------------------*/

/* Header */
.responsive #top #header,
/* Top bar */
.responsive #top #header #header_meta,
/* Search icon */
.responsive #top #header #menu-item-search a,
/* Cart icon */
.responsive #top #header a.cart_dropdown_link,
/* Social icon */
.responsive #top #header #header_main nav .social_bookmarks,
/* Logo */
.responsive #top #header #header_main .inner-container .logo,
/* Main menu, cart and social icons */
.responsive #top #header #header_main .inner-container .main_menu,
/* Widgets */
.responsive #top #header #header_main .inner-container .widget,
/* Header inner container */
#top #header #header_main .container.av-logo-container .inner-container {    
    display: flex;
    position: relative;
}

/*--------------------------------

» Topbar

--------------------------------*/

/* Top bar */

.responsive #top #header #header_meta {
    flex-basis: 100%;    
}

/*--------------------------------

» Header

--------------------------------*/

/* Height */

#top #header #header_main .container.av-logo-container {
    height: inherit;   /* Auto height: Header takes the height of the contents */
}

/* Header inner container */

#top #header #header_main .container.av-logo-container .inner-container {
  height: inherit; 
  position: relative !important;
  flex-wrap: nowrap;
  justify-content: space-between;
}

/* Wrappers 
--------------------------------*/

/* Header content and Topbar */

.responsive #top #header {
    flex-wrap: wrap;
}

/* Header contents: Logo, Menu, Social Icons and Widgets. */

.responsive #top #header #header_main {
    flex-basis: 100%;    
}

/* Transparent header 
--------------------------------*/

.responsive.html_header_transparency #top #wrap_all #header {
    position: absolute;
}

/* Main content: 
-----------------------*/

.responsive #top #main { 
    padding-top: 0px; /* Gap between the content and header */
} 

/* Fixed header 
--------------------------------*/

/* Fixed header */

.html_header_sticky.html_header_transparency #top #wrap_all #header,
.html_header_sticky #top #wrap_all #header { 
    position: fixed; 
} 

/* Fixed header and page content gap. 
   Padding value should be same as the fixed header height. */

.html_header_sticky:not(.html_header_transparency) #top #wrap_all #main { 
    /*padding-top: 145px !important; */
} 

@media only screen and (max-width: 767px) {
.html_header_sticky #top #wrap_all #main {
    /*padding-top: 145px !important; */
}}

/*--------------------------------

» Logo

--------------------------------*/

/* Logo */

.responsive #top #header #header_main .inner-container .logo {
    order: 0;
    flex-basis: auto;
    /*width: auto;*/

    /* Define scalable min width of the logo on small screens */
    min-width: 100px;
    /* Define scalable max width of the logo on big screens */
    /* Logo width: (auto | 100% | px );  Set auto to display the uploaded image size */
    max-width: 180px;
    
    z-index: 9;
}

/* Logo image size */

.responsive #top #header .logo,
.responsive #top #header .logo a,
.responsive #top #header .logo img {
    width: auto;
        
    /* Height specification is not required. It is proportional to the max width of the logo */
    height: auto;    
    align-items: center;
    align-self: center;
    justify-content: center;
}

/* Vertically center transparency logo */

.responsive #top #header .logo span img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/*--------------------------------

» Menu

--------------------------------*/

/* Menu outer container: Menu with siblings cart and social icons */

.responsive #top #header #header_main .inner-container .main_menu {
    order: 0;
    flex-basis: auto;   /* Use calc to minus the width of the logo */
    align-items: center;
    align-self: center;
}

/* Navigation */

#header .av-main-nav {
    display: flex;
    flex-wrap: nowrap;
}

/*  Activate burger menu  */

@media only screen and (max-width: 1000px) {
    #top #header .av-main-nav>li.menu-item {
        display: none!important;
    }
    #top #header .av-burger-menu-main {
        cursor: pointer;
        display: block!important;
    }
}

@media only screen and (max-width: 767px) {

/* Mobile menu position fix */
.responsive #top .av-logo-container .avia-menu {
    display: flex!important;
    align-items: center;
}}

/* Mega menu position fix */
#header li .avia_mega_div,
#header li:hover .avia_mega_div {
    right: 0 !important; /* submenu position */
    left: auto!important; /* submenu position */
    max-width: 50vw;
}

/*--------------------------------

» Widget

--------------------------------*/

/* Widgets */

.responsive #top #header #header_main .inner-container .widget {
    order: 0;
    flex-basis: auto;
    padding: unset;
    clear: none!important;

    align-self: center;
    align-items: center;
    z-index: 1;

}

.responsive #top #header #header_main .inner-container .widget>div {
    width:100%;
    line-height: 14px;
    padding:0 10px;
}

/*--------------------------------

» Social icons

--------------------------------*/

/* Flex support and position fix */
.responsive #top #header #header_main nav .social_bookmarks {
    display: flex;
     top: auto;
     margin-top: 0;
     align-items: center;
}
/* Inherit height for flex alignment */
#top .av-logo-container .social_bookmarks li {
    height: inherit;
}

/*--------------------------------

» Search 

--------------------------------*/

/* Your styles here */

/*--------------------------------

» Cart 

--------------------------------*/

/* Cart position fix */

#top #header #header_main #menu-item-shop a.cart_dropdown_link {
    height: auto;
}

@media only screen and (max-width: 767px) {
    .responsive #top #menu-item-shop.cart_dropdown {
        display: flex;
        align-items: center;
    }
    .cart_dropdown .dropdown_widget .avia-arrow {
        display: none;
    }
}

Thank you very much!

How can I explain it? Maybe this is helpful for you to understand. Structured data is added directly to a page’s HTML markup. Search engines use structured data to generate rich snippets, which are small pieces of information that will then appear in search results. Google has written a lot about it. https://developers.google.com/search/docs/guides/intro-structured-data But this is a language I don’t understand.

We have it implemented on our website on one page with a plugin. But it is outside the ENFOLD template and therefore ugly. Look at https://www.m24o.net/product/music-trips-italy/ at the bottom of the page. It is a FAQ structure. When you search in google with “m24o music trip italy” then you see how google shows the page. Nice. It helps to bring us up in the ranking and it covers a lot of real estate in the search display.

It would be nice if the Accordion element had the code to create this data structure. I think you could make a lot of people happy with that option.

Hello Basilis,
thanks for that offer but i think that we optimised everything
– Caching
– Shortpixel
– Speedsettings on Aviapage
– htacess (expires/caches/compress and more)
– Defer JS
– responsive (which by the way leads to a massive increase in pageload because if you use Enfold you need to decide if you want SEO or Responsiveness.)
and more….
What else do you want to optimize??

And now back to topic
Yesterday the page did almost NOT load at all – for minutes.
PLEASE see the video:
[video src="https://maskenzauber.com/temp/maskenzauber-dead.mp4" /]

Of course we searched the reason for that desaster not only in the theme and thats why we discuss that since weeks also with our hosting company – Hetzner – and they always blame the theme.
Actually they said that there are problems with loading the fonts via JQuery.
Since we did not edit anything in the code (i only use the features and options offered by Enfold) it must be searched in the theme (if Hetzner is right with the font issue)

Here is the screenshot they provided to proof the issue:
https://maskenzauber.com/temp/maskenzauber-hetzner.png

Maren

Thank you for the link! It is a good search tool. There are some people they combine Enfold with WPML.

UPDATE
Here’s what I did that (mostly) worked:

1. Went to Settings > Permalinks and changed the Portfolio ‘custom bases’ to “titles” and “titles-entries”
2. In the enfold-child theme, I opened functions.php and pasted in this:<br />

   
   // portfolio args
   add_action( 'after_setup_theme', 'init_reg_portfolio' );
   function init_reg_portfolio() {
   	add_filter('avf_portfolio_cpt_args', 'avf_portfolio_cpt_args_mod', 50, 1);
   }
   
   function avf_portfolio_cpt_args_mod($args) {
   	$labels = array(
   		'name' => _x('Book Titles', 'post type general name','avia_framework'),
   		'singular_name' => _x('Title Entry', 'post type singular name','avia_framework'),
   		'add_new' => _x('Add New', 'portfolio','avia_framework'),
   		'add_new_item' => __('Add New Title','avia_framework'),
   		'edit_item' => __('Edit Title Entry','avia_framework'),
   		'new_item' => __('New Title Entry','avia_framework'),
   		'view_item' => __('View Title Entry','avia_framework'),
   		'search_items' => __('Search Title Entries','avia_framework'),
   		'not_found' =>  __('No Title Entries found','avia_framework'),
   		'not_found_in_trash' => __('No Title Entries found in Trash','avia_framework'),
   		'parent_item_colon' => ''
   	);
   
   	$args['labels'] = $labels;
   	return $args;
   }
   //END
   

3. In wp-content > themes > enfold > includes > admin I opened register-portfolio.php and made the $labels = array code block look like this:

   $labels = array(
   		'name' => _x('Book Titles', 'post type general name','avia_framework'),
   		'singular_name' => _x('Title Entry', 'post type singular name','avia_framework'),
   		'add_new' => _x('Add New', 'portfolio','avia_framework'),
   		'add_new_item' => __('Add New Title','avia_framework'),
   		'edit_item' => __('Edit Title Entry','avia_framework'),
   		'new_item' => __('New Title Entry','avia_framework'),
   		'view_item' => __('View Title Entry','avia_framework'),
   		'search_items' => __('Search Title Entries','avia_framework'),
   		'not_found' =>  __('No Title Entries found','avia_framework'),
   		'not_found_in_trash' => __('No Title Entries found in Trash','avia_framework'),
   		'parent_item_colon' => ''
   	);
   

[ NOTE: I’m not sure this is important, but I made the names match what I did in functions.php above ]

I said “mostly works” above because “Portfolio Categories” is still visible in the options.

I tried to follow what Ismael and mikeraymarketer were doing here to fix the same issue, but when I did it, I got errors so I walked it back.

oh…
The problem is solved. I don’t know the exact reason, but after adding the search icon to the main menu in Enfold Child Theme Options’s main menu, I refreshed and ‘accordion’ worked fine. The reason I added the search icon is that when I tested ‘accordion’ on the test page, I tested ‘search’ together, and since then ‘accordion’ didn’t work properly.
And ‘accordion’ works fine even if I remove the search icon from the main menu of the enfold child theme option.