Hi,
Instead of using page IDs you could add a class to all of your “black” styled pages and change the script to look for #top.black instead of #top.page-id-33 To add this class to some of your pages you could use the WordPress Custom Fields option, the Custom Fields options on the Post & Page edit screens are hidden by default if they have not been used before. Using the Block Editor, click the three dots button at the top of the right sidebar and visit Options to enable it. (If you are using the Classic editor, check the screen options).
So in this case we will add the Name: bodyclass and the Value: black

to each one of these pages, then add this code to the end of your functions.php file in Appearance > Editor:

function add_custom_fields_bodyclass( $classes ) {
    global $post;
    $bclass = get_post_meta( $post->ID, 'bodyclass', true );
    if ( empty( $bclass ) ) {
        return $classes;
    }
    $classes[] = $bclass;
    return $classes;
}
add_filter( 'body_class', 'add_custom_fields_bodyclass' );

Please note that this only looks for the Name: bodyclass but it will add any value as a body class.
As for question #2 I’m not seeing the full-width sub-menu on your home page, which page are you testing on? Which animated gif are you referring to?

Best regards,
Mike

Hi,
Thank you for the login update and the ftp access, so I was able to correct the issue on your site by capitalizing the font name in your merged css file on your server, for some reason this makes a difference on your server.
I checked this situation on my test server and the font is showing correctly with it in lower caps, so the only thing I can imagine is this is a server encoding issue, but I’m only guessing.
So you should be able to clear your browser cache and see the correct font now, but this may change again if you make any theme changes and the merged css file is updated, if so I recommend adding this css to your WordPress > Customize > Additional CSS field, not the Quick CSS.

h1, h2, h3, h4, h5, h6, #top .title_container .main-title, tr.pricing-row td, #top .portfolio-title, .callout .content-area, .avia-big-box .avia-innerbox, .av-special-font, .av-current-sort-title, .html_elegant-blog #top .minor-meta, #av-burger-menu-ul li {
    font-family: 'Quattrocento' !important;
}

Best regards,
Mike

Hi,
Sorry for the late reply and thank you for your patience. I was not able to login into your site please update the login token, but are you setting the font in the Advanced Styling and in the Headline element? I saw an issue where the font was set in the Advanced Styling and the color was set in a text element making the element use the “inherit” font rule which showed the wrong font, once the option in the element was removed the correct font showed, perhaps your issue is similar?

Best regards,
Mike

Hi,
Sorry to hear this didn’t work for you, it seemed to work for me when I injected it, are you forcing jQuery to load in your footer? Did you try it with WP Rocket disabled?
Anyways I have submitted this to the dev team to review, I will reply when I hear back from them, thank you for your patience.

Best regards,
Mike

Hi,
Sorry we were not more help with this, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Thank you for the login to your test server, but the images are not showing on the product page nor in the media library, empty placeholders are showing in the media library, I also notice that you have a plugin called “all import” the empty images in the media library looks like a failed import, when I compare this with the product page image, which is empty, clicking on it redirects to the home page with this error in the console OTS parsing error: invalid sfntVersion
So as your test site stands it will not help me investigate your live site’s issue, please try creating a staging site which is a working clone of your live site, or grant access to your live site. Most web hosts that use the cPanel have a “Staging Site” option that will clone your site to a test sub-domain in just a few mins, perhaps you can try this?

Best regards,
Mike

Hi,
Thank you for the feedback, from what I see on your page /angebote/ last element is centered in all languages when the sort is “ALLE” or on page load, on Windows 10 this is true in Chrome, Firefox, & Edge, so the last image is not centered only in the DE version, I didn’t find why this is other that the javascript css:

element.style {
    position: absolute;
    left: 33.2994%;
    top: 832.6px;
}

the masonry container is using float: left;
only one of the other pages you linked to shows a single item at the end and that one is set to landscape mode which takes 2/3 of the screen. If you plan on adding more items, try adding one more now and see if that helps. Also try disabling your cache plugin and any minification, I recall a multiple layer caching & minification that caused some odd masonry behavior in the past.

Best regards,
Mike

Hi,
Thank you for the feedback, I added this script to your child theme functions.php and it seems to work for both of your portfolio grid item, with the default linking or the custom linking, please check.

function portfolio_grid_content_linked() { ?>
    <script>
(function($) {
  $(".grid-content").click(function(){
      window.location = $(this).closest('.inner-entry').find("a:first").attr("href");
      return false;
  });
}(jQuery));
</script>
    <?php
}
add_action('wp_footer', 'portfolio_grid_content_linked');

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Thank you, glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hey Fabian J.,
Thank you for your patience and the link to your site, when I check your page the last element is centered in all languages when the sort is “ALLE”. What is happening is the css for all of the items is set by javascript and uses absolute positioning, when the sort options are used the other items are still there in the source, just not shown, so it may look like there is one item to the left, but there is really more. Anyways I was able to put together a solution for you with this css:

.av-masonry-container:not([id]) #av-masonry-1-item-9759,
.av-masonry-container#masonry_id_all_sort #av-masonry-1-item-9759 {
	left: 0 !important;
}

it sets the last item to left zero if no sort is clicked, like on page load, and when the “ALLE” sort is clicked.

Best regards,
Mike

Hi,
Thank you for your patience, and for the login to your site, your issue was with your Quick CSS custom css, I started by removing all of your css and adding it back a little at a time, I found some errors and tried correcting them, in the end these are the two rules that seemed to be cuasing the problem:

#header .main_menu {
/*background: gold;*/
width: 100%;
left: 50%;
transform: translateX(-50%);
}

.av-main-nav-wrap {
left: 50%;
transform: translateX(-50%);
}

Please clear your browser cache and check.

For your information, this was your original css:

/* HEADER */

.navbar, .page-title-section {
display: none;
}

.inner-container {
	position: relative;
	height: 150%;
	width: 100%;
	margin-top: 0px;
}

.responsive .logo img {
	margin: 45px 0 10px 0;
}

.header-introduction-small .section-head h1 {
	letter-spacing: 0;
	font-size: 40px !important;
	font-weight: 100;
	opacity: 0.6;
	padding: 150px 0px 0px 0px;
}

#top .av-main-nav ul a {
	width: 100%;
	height: auto;
	float: left;
	text-align: left;
	line-height: 23px;
	padding: 8px 15px;
	font-size: 17px;
	min-height: 23px;
	max-width: none;
	text-decoration: none;
	font-family: inherit;
	text-transform: uppercase;
}

#top #wrap_all .av_header_transparency {
	background-color: transparent;
	color: #131313;
	border-color: #ebebeb;
}

.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: #000;
	color: #fff;
}

.av-main-nav ul li:last-child > a {
	border-bottom-style: solid;
	border-bottom-width: 0px;
}

.av-main-nav ul li a {
	border-right-style: solid;
	border-right-width: 0px;
	border-left-style: solid;
	border-left-width: 0px;
}

/* BODY */

#top .av_inherit_color a {
	text-decoration: none;
}

.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li a {
	color: #fff;
	line-height: inherit;
	font-size: 26px;
	font-family: 'cormorant-garamond','HelveticaNeue','Helvetica Neue','Helvetica-Neue',Helvetica,Arial,sans-serif;
	text-transform: uppercase;
}

#top #wrap_all .error .text_input, #top #wrap_all .error .text_area, #top #wrap_all .error .select {
	border: 1px solid #F00;
}

#top #wrap_all .error .input_checkbox_label {
	color: #F00;
}

.avia-cookie-consent a.avia_cookie_infolink, .avia-cookie-consent p, .avia-cookie-consent .avia-cookie-consent-button {
	display: inline-block;
	vertical-align: middle;
	font-size: 18px !important;
	letter-spacing: 0.05em;
}

.avia-button.avia-size-medium {
	font-size: 16px;
}

strong, b {
	font-weight: normal;
}

#top .av-flex-placeholder {
	display: table-cell;
	width: 1%;
}


/* FOOTER*/


/* SOCKET*/

#socket .copyright {
	float: left;
	font-size: 16px;
}

.socket_color a, .socket_color .widget_first, .socket_color strong, .socket_color b, .socket_color b a, .socket_color strong a, .socket_color #js_sort_items a:hover, .socket_color #js_sort_items a.active_sort, .socket_color .av-sort-by-term a.active_sort, .socket_color .special_amp, .socket_color .taglist a.activeFilter, .socket_color #commentform .required, #top .socket_color .av-no-color.av-icon-style-border a.av-icon-char, .html_elegant-blog #top .socket_color .blog-categories a, .html_elegant-blog #top .socket_color .blog-categories a:hover {
	color: #ffffff;
	font-size: 16px;
}



.av-main-nav > li > a {
	padding: 0 23px;
	font-size: 18px;
        text-transform: uppercase;
       font-family: 'cormorant-garamond','HelveticaNeue','Helvetica       Neue','Helvetica-Neue',Helvetica,Arial,sans-serif;
	}



 @media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#top #header .av-main-nav li:nth-child(2) {
/* Adjust the width of the logo */
margin-right:15%;
}

#top #header .av-main-nav li:nth-child(3) {
/* Adjust the width of the logo */
margin-left:15%;
}



#header .main_menu {
/*background: gold;*/
width: 100%;
left: 50%;
transform: translateX(-50%);
}

.av-main-nav-wrap {
left: 50%;
transform: translateX(-50%);
}

#header .logo {
left: 50%;
transform: translateX(-50%);
z-index:999;
}

#header .logo img {
top: 20%;
transform: translateY(-50%);
max-width: 250px;
}
}


/* Top Bar content alignment */

#top #header_meta .container {
           display: flex;
           justify-content: center;
}

#top #header_meta .sub_menu {
           top:0;
}
#top #header_meta .sub_menu,
#top #header_meta .social_bookmarks {
           align-self: center;
}

#top #header_meta .phone-info {
           order: 2;
}

#top #header_meta .phone-info span {
           display: flex;
           align-items: center;
}

#top #header_meta .sub_menu {
           order: 1;
}
#top #header_meta .social_bookmarks {
           order: 3;
}


#avia-menu {
width:1300px !important;
}

#menu-item-551 {
    margin-left: 0 !important;
}

/*fabio burger menu */
 @media only screen and (max-width: 1199px) {
#top #header .av-main-nav > li.menu-item  {
    display: none!important;
}
#top #header .av-burger-menu-main {
    cursor: pointer;
    display: block!important;
}
.container.av-logo-container .header_main_alternate .container{
left:70%!important;
}
#avia-menu {
  float: right; 
   width: auto !important;
}
}

and this is what you have now:

/* BODY */

#top .av_inherit_color a {
    text-decoration: none;
}

.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li a {
    color: #fff;
    line-height: inherit;
    font-size: 26px;
    font-family: 'cormorant-garamond','HelveticaNeue','Helvetica Neue','Helvetica-Neue',Helvetica,Arial,sans-serif;
    text-transform: uppercase;
}

#top #wrap_all .error .text_input, #top #wrap_all .error .text_area, #top #wrap_all .error .select {
    border: 1px solid #F00;
}

#top #wrap_all .error .input_checkbox_label {
    color: #F00;
}

.avia-cookie-consent a.avia_cookie_infolink, .avia-cookie-consent p, .avia-cookie-consent .avia-cookie-consent-button {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px !important;
    letter-spacing: 0.05em;
}

.avia-button.avia-size-medium {
    font-size: 16px;
}

strong, b {
    font-weight: normal;
}

#top .av-flex-placeholder {
    display: table-cell;
    width: 1%;
}


/* FOOTER*/


/* SOCKET*/

#socket .copyright {
    float: left;
    font-size: 16px;
}

.socket_color a, .socket_color .widget_first, .socket_color strong, .socket_color b, .socket_color b a, .socket_color strong a, .socket_color #js_sort_items a:hover, .socket_color #js_sort_items a.active_sort, .socket_color .av-sort-by-term a.active_sort, .socket_color .special_amp, .socket_color .taglist a.activeFilter, .socket_color #commentform .required, #top .socket_color .av-no-color.av-icon-style-border a.av-icon-char, .html_elegant-blog #top .socket_color .blog-categories a, .html_elegant-blog #top .socket_color .blog-categories a:hover {
    color: #ffffff;
    font-size: 16px;
}
/*fabio burger menu */
 @media only screen and (max-width: 1199px) {
#top #header .av-main-nav > li.menu-item  {
    display: none!important;
}
#top #header .av-burger-menu-main {
    cursor: pointer;
    display: block!important;
}
.container.av-logo-container .header_main_alternate .container{
left:70%!important;
}
#avia-menu {
  float: right; 
   width: auto !important;
}
}
/* Top Bar content alignment */

#top #header_meta .container {
        display: flex;
        justify-content: center;
}

#top #header_meta .sub_menu {
        top:0;
}
#top #header_meta .sub_menu,
#top #header_meta .social_bookmarks {
        align-self: center;
}

#top #header_meta .phone-info {
        order: 2;
}

#top #header_meta .phone-info span {
        display: flex;
        align-items: center;
}

#top #header_meta .sub_menu {
        order: 1;
}
#top #header_meta .social_bookmarks {
        order: 3;
}
#menu-item-551 {
    margin-left: 0 !important;
}

/* HEADER */

.navbar, .page-title-section {
    display: none;
}
    
.inner-container {
    position: relative;
    height: 150%;
    width: 100%;
    margin-top: 0px;
}

.responsive .logo img {
    margin: 45px 0 10px 0;
}

.header-introduction-small .section-head h1 {
    letter-spacing: 0;
    font-size: 40px !important;
    font-weight: 100;
    opacity: 0.6;
    padding: 150px 0px 0px 0px;
}

#top .av-main-nav ul a {
    width: 100%;
    height: auto;
    float: left;
    text-align: left;
    line-height: 23px;
    padding: 8px 15px;
    font-size: 17px;
    min-height: 23px;
    max-width: none;
    text-decoration: none;
    font-family: inherit;
    text-transform: uppercase;
}

#top #wrap_all .av_header_transparency {
    background-color: transparent;
    color: #131313;
    border-color: #ebebeb;
}

.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: #000;
    color: #fff;
}

.av-main-nav ul li:last-child > a {
    border-bottom-style: solid;
    border-bottom-width: 0px;
}

.av-main-nav ul li a {
    border-right-style: solid;
    border-right-width: 0px;
    border-left-style: solid;
    border-left-width: 0px;
}
.av-main-nav > li > a {
    padding: 0 23px;
    font-size: 18px;
    text-transform: uppercase;
    font-family: 'cormorant-garamond','HelveticaNeue','Helvetica       Neue','Helvetica-Neue',Helvetica,Arial,sans-serif;
}
/* HEADER */

.navbar, .page-title-section {
    display: none;
}
    
.inner-container {
    position: relative;
    height: 150%;
    width: 100%;
    margin-top: 0px;
}

.responsive .logo img {
    margin: 45px 0 10px 0;
}

.header-introduction-small .section-head h1 {
    letter-spacing: 0;
    font-size: 40px !important;
    font-weight: 100;
    opacity: 0.6;
    padding: 150px 0px 0px 0px;
}

#top .av-main-nav ul a {
    width: 100%;
    height: auto;
    float: left;
    text-align: left;
    line-height: 23px;
    padding: 8px 15px;
    font-size: 17px;
    min-height: 23px;
    max-width: none;
    text-decoration: none;
    font-family: inherit;
    text-transform: uppercase;
}

#top #wrap_all .av_header_transparency {
    background-color: transparent;
    color: #131313;
    border-color: #ebebeb;
}

.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: #000;
    color: #fff;
}

.av-main-nav ul li:last-child > a {
    border-bottom-style: solid;
    border-bottom-width: 0px;
}

.av-main-nav ul li a {
    border-right-style: solid;
    border-right-width: 0px;
    border-left-style: solid;
    border-left-width: 0px;
}

@media only screen and (min-width: 766px) {
#top #header .av-main-nav li:nth-child(2) {
/* Adjust the width of the logo */
margin-right:15%;
}
#top #header .av-main-nav li:nth-child(3) {
/* Adjust the width of the logo */
margin-left:15%;
}
#header .logo img {
top: 20%;
transform: translateY(-50%);
max-width: 250px;
}
#header .logo {
left: 50%;
transform: translateX(-50%);
z-index:999;
}
}

@media only screen and (min-width: 1200px) {
#avia-menu {
    width:1200px !important;
}
}

Best regards,
Mike

Hey Reut Rachel,
Thank you for your patience and for the login, you were missing a little code pointing to the image you wanted to use in the Quick CSS field, so I added it for you, but I was not sure which image to use so I guessed, you can check and change if you want. If you still have problems please tell us which image to use and I will change.
Please clear your browser cache and check.

Best regards,
Mike

Hi,
Sorry for the late reply and thank you for your patience and the link to your site. I believe the question now is:

Is there a way to make the menu and logo shrink to fit the screen before it finally switches to tablet/mobile menu?

and I see the switch occurs at 1449px, but at 1450px the logo and menu both seem to fit fine, please see the screenshot in the Private Content area.
There is a min-width of 90px that you could remove that would help with the smaller menu items:

.av_seperator_big_border .av-main-nav > li > a {
    min-width: 0 !important;
}

see second screenshot. There is also 13px of padding, but I don’t think you will want to remove that.
What did you have in mind?

Best regards,
Mike

Hi,
Thank you for your patience, on the demo the portfolio grid element is set to “open a preview (aka AJAX Portfolio)” but in comparing your page I notice that your portfolio item doesn’t link to a portfolio page, it is only http:// and the title doesn’t have a link either. In this screenshot your page is on to and my test page is below.

I believe the issue is that for your portfolio items you have set a custom link in the Overwrite Portfolio Link setting

Please try changing this back to the default setting.

Best regards,
Mike