Hey mandystohry1,

Thank you for the inquiry.

1.) You can add this css code to change the color of the submenu items on hover:

#top .av-subnav-menu li a:hover {
    color: red;
}

2.) And to highlight the active item, please add this script in the functions.php file:

function ava_custom_script() { ?>
    <script>
        (function ($) {
            $(document).ready(function () {
                var currentUrl = window.location.href;
                $('.av-subnav-menu .menu-item a').each(function () {
                    if (this.href === currentUrl) {
                        $(this).parent().addClass('active');
                    }
                });
            });
        }(jQuery));
    </script>
<?php }
add_action('wp_footer', 'ava_custom_script', 99);

Then add this css code:

#top .av-subnav-menu li.active a {
    color: blue;
}

Best regards,
Ismael

Hi,

Thank you for the info.

The issue occurred because of this css rule:

#top .avia-layerslider .ls-wp-container .ls-slide-backgrounds * {
    max-width: 100%;
}

We removed it from the Quick CSS field.

Best regards,
Ismael

Hi,

Yes, you can use the avf_responsive_media_sizes filter to adjust the breakpoints, but keep in mind that it will be applied globally and may affect various styling options across the site.

function avf_responsive_media_sizes_mod( $sizes ) {
    $sizes = array(
        'av-desktop' => array( 1024, 0 ),  // Desktop view: Min width 1024px
        'av-medium'  => array( 769, 1023 ), // Medium view: 769px to 1023px
        'av-small'   => array( 481, 768 ),  // Small view: 481px to 768px
        'av-mini'    => array( 0, 480 )     // Mini view: 0px to 480px
    );

    return $sizes;
}
add_filter( 'avf_responsive_media_sizes', 'avf_responsive_media_sizes_mod' );

Best regards,
Ismael

Hi,

Thank you for the inquiry.

The caption titles look white when we checked. To center-align the container, please add this css code:

.avia-slideshow.av-desktop-hide.av-medium-hide .avia-caption {
    bottom: 31%;
    left: 50%;
    transform: translateX(-50%);
}

Best regards,
Ismael

Hi,
The Sticky Header feature is not meant to work on mobile devices, for desktop it is working, perhaps you have added a plugin or code snippet that is a conflict.
Try did you try disabling your plugins and code snippets?
Also note that if you set this in the theme settings, each page also has this option that can be overridden, so check the page that you are having trouble with.
Otherwise we will need a admin login to the page to check.

Best regards,
Mike

Hey Woutski,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.container_wrap { border-top: none !important; }

After applying the css, please clear your browser cache and check.
If this doesn’t help, please link to your page so we can examine.

Best regards,
Mike

Hey Tilman,

Please check if you have selected to show the Excerpt field under Screen Options in the top right hand corner of the screen while editing a post.

Best regards,
Rikard

Hey chiller3,
Thank you for your patience, when you use this solution you need to add custom links to each image link on your homepage, currently all point to https://wach.design/guteraeume/kollektion/ with no hash tag.
your Hash tags need to be for the sort data-filter like:
#accessoires_sort
#regale_sort
#betten_sort
#lampen_sort
#sessel_sort
#sofas_sort
#stuehle_sort
#teppiche_sort
#tische_sort
I tested and it works.

Best regards,
Mike

Hi,
If you don’t have WordPress ▸ Appearance ▸ Theme File Editor enabled on your site then use FTP
If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

and ensure that it is activated, then add the above code and save.

Best regards,
Mike

Hi,
On mobile, I see that you are using the “easy slider” to change the H tag, click on the element and go to each slide, under the advanced tab change the heading tag:

you had this code in your child theme function.php causing a conflict:

I disabled it for you.
Change the font size under the styling tab:

to center add this css:

.avia-slideshow.av-desktop-hide.av-medium-hide .avia-caption {
    bottom: 30%;
    left: 30%;
}

Best regards,
Mike

Hey Ad-Min747,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_action('admin_bar_menu', function ($wp_admin_bar) {
    if (!current_user_can('administrator')) {
        $wp_admin_bar->remove_node('avia');
    }
}, 999);
function hide_enfold_theme_options_menu() {
    if (!current_user_can('administrator')) {
        echo "<style>#toplevel_page_avia { display: none; }</style>";
    }
}
add_action('admin_head', 'hide_enfold_theme_options_menu');

Best regards,
Mike

Hi,
Thank you for your patience, when I check your /design-portfolio/ page with webpagetest.org as a desktop it loaded around 4s
as mobile, it loaded around 8s, I found that your WP-Optimize plugin created separate files for mobile:

when I disable this it then loaded around 6s for mobile.
webpagetest.org uses 4g for mobile and page speed uses 3g, in both cases the mobile tests are throttled down and a real world device may use a 5g connection.
Your bluehost plugin is also caching, so you have the theme cache, WP-Optimize cache, and bluehost cache.
You could test the different settings in each, but in my experience, 4s for desktop and 6s for mobile is fair.

Best regards,
Mike

Hi,
Try adding your “Home” menu link and add this custom class:

av-desktop-hide

Best regards,
Mike

Hi,
I’m not able to login as admin, so it is hard to tell what css might be causing a conflict.
But it looks like adding this css helps:

@media only screen and (max-width: 1650px) {
.responsive #top .cart_dropdown {
z-index: 600;
}
}

when clicking on the far left of the cart button

Best regards,
Mike

Hi,
Thanks for your advice Guenni007
iveyeng I don’t have an iphone, but I checked on a Mac in safari and found that after I cleared your WP Rocket plugin and cleared the Safari plugin the css is working.
Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
I also noted the safari needed a different value, 177px instead of 190px for Android, so I adjusted the css to this:

@media only screen and (max-width: 767px) {
    .responsive.avia-safari #top #wrap_all #header {
        height: 177px !important; 
    }
}
@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all #header {
        height: 190px; 
    }
}

This is the Safari mobile view:

If you still don’t see this try disabling your WP rocket plugin until to finish building your site.

Best regards,
Mike

Hey Vera,

I can’t see any problem on my end, I see the same font on desktop as I do on phone emulation and on an actual Android device. How can we reproduce the results that you are seeing on your end?

Best regards,
Rikard

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
 .responsive #top #wrap_all .flex_column {
        margin-bottom: 0px;
 }
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike