Hi,

Thank you for the info.

We edited the contact page and set the Styling > Font Sizes > Caption Title Font Size to 18px for mobile devices. The default custom size is 60px. You can also adjust the size for desktop and tablet in portrait/landscape modes. The font size should respond automatically if the Font Size default is set to the initial option, but since it’s set to a custom size (60px), you have to manually define the font size for all screen sizes. Please check the screenshot in the private field.

Best regards,
Ismael

Hi,
I believe that I have found a solution to change the sidebar header menu to have multiple dropdowns like the burger menu,

for example this is the first dropdown after a click:

this is the second level after click:

please note that both the “first level” and “second level” menu items are not links to pages, so a click will open the sub-menu:

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

function change_sidebar_menu_to_burger_menu_dropdown() { ?>
  <script>
document.addEventListener("DOMContentLoaded", function() {
    var screenWidth = window.innerWidth;
    if (screenWidth >= 768) {
        if (document.documentElement.classList.contains("html_header_sidebar")) {
            const aviaMenu = document.getElementById("avia-menu");
            if (aviaMenu) {
                aviaMenu.id = "av-burger-menu-ul";
                aviaMenu.classList.remove("av-main-nav");
                aviaMenu.classList.remove("menu");
            }
            const menuItems = document.querySelectorAll("#av-burger-menu-ul .menu-item");

            menuItems.forEach(function(item) {
                item.classList.add("av-active-burger-items");
                item.classList.remove("menu-item");
            });
            const menuItemsWithChildren = document.querySelectorAll("#av-burger-menu-ul .menu-item-has-children");

            menuItemsWithChildren.forEach(function(item) {
                item.classList.add("av-width-submenu");
                //item.classList.remove("menu-item-has-children");

                const dropdownAva = item.querySelector(".menu-item-has-children.av-width-submenu .avia-menu-text");
                if (dropdownAva) {
                    const dropdownAvailable = document.createElement("span");
                    dropdownAvailable.classList.add("dropdown_available");
                    dropdownAva.insertAdjacentElement('afterend', dropdownAvailable);
                }
                const dropdownSpan = item.querySelector(".menu-item-has-children.av-width-submenu .dropdown_available");
                if (dropdownSpan) {
                    const submenuIndicator = document.createElement("span");
                    submenuIndicator.classList.add("av-submenu-indicator");
                    dropdownSpan.insertAdjacentElement('afterend', submenuIndicator);
                }
            });

            const style = document.createElement('style');
            style.innerHTML = `
                #top #av-burger-menu-ul {
                    width: 300px;
                    padding: 0px 30px;
                }
                .main_menu ul:first-child>li a {
                    height: 50px;
                    line-height: 50px;
                }
            `;
            document.head.appendChild(style);
        }
    }
});
</script>
  <?php
}
add_action( 'wp_footer', 'change_sidebar_menu_to_burger_menu_dropdown', 99 );

Please disable any previous snippets from this thread.

Best regards,
Mike

Hi,
Your css for the headings doesn’t have the enough specifically, I would recommend this:

@media only screen and (max-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
#top #wrap_all .all_colors h1, 
#top #wrap_all .all_colors h2, 
#top #wrap_all .all_colors h3, 
#top #wrap_all .all_colors h4, 
#top #wrap_all .all_colors h5, 
#top #wrap_all .all_colors h6 {
  font-family: 'Open-Sans', sans-serif;
font-style: italic; 
}
}

plain h1, h2, h3, h4, h5, h6 is not enough to override the theme.
As for Safari it 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 doubt that this is what you are experiencing right now, but please keep this in mind

Best regards,
Mike

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

@media only screen and (max-width: 767px) { 
	#top .av-burger-menu-main.menu-item-avia-special {
		    left: -40%;
}
.html_visible_cart .cart_dropdown {
    right: 4%;
    z-index: 999 !important;
}
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
This is because of the script that was added, please see this thread.

Best regards,
Mike

Hi,
You will need to disable the mega menu so the mega menu doesn’t show to the right and have the click issue.
If you want to use the menu with the script and have the menu items open below then you can use the script.
If you don’t like how the script works then you can remove it.
There is not need to open a new thread for a 2 times drop down menu, you already have this one open.
Unfortunately there I don’t find a solution, since this menu structure is not a option in the theme and seems to be more involved than I first thought, I recommend opening a feature request so the Dev Team can review adding this as a option.
Since this is a duplicate thread it would be easier to keep all of the commentscomments in one thread

Best regards,
Mike

Hi,
Your screenshot looks like the socket is full width, but your site is smaller, so I recommend making the area full width and making the font smaller so there is enough room.

.responsive #socket > .container {
    max-width: 100%;
    font-size: 18px;
}
#socket .copyright {
    float: right;
    padding-left: 20px;
    line-height: 24px;
}

and then move the “title” on the right side over some in the css for it, currently you have:

#footer-title {
    font-size: 38px;
    font-family: zen-kaku-gothic-new;
    color: #000;
    font-weight: bold;
    float: right;
    top: -38px;
    position: relative;
    left: -15%;
}

change to:

#footer-title {
    font-size: 38px;
    font-family: zen-kaku-gothic-new;
    color: #000;
    font-weight: bold;
    float: right;
    top: -38px;
    position: relative;
    left: -5%;
}

Best regards,
Mike

Hi,
Thank you for your patience, I have tried to reproduce this error with a self-hosted mp4 on my test site and I checked my Apache log, but unfortunately I only see the .mp4 video file type and the .jpg thumbnail for the .mp4
I tried to create a function to add to your child theme functions.php to change this anyways, I can’t confirm that it will work for you, but adding it didn’t brake my video element, so please give this a try and see if it helps.

if (!function_exists('custom_avia_html5_video_embed')) {
    function custom_avia_html5_video_embed( $video, $image = '', $types = array( 'mp4' => 'type="video/mp4"' ), $attributes = array( 'autoplay' => 0, 'loop' => 1, 'preload' => '', 'muted' => '', 'controls' => ''  ) ) {
        $html5_files = array();
        $path = $video;

        if( ! empty( $video ) && is_array( $video ) )
        {
            $html5_files = array_filter($video, function($ext) {
                return $ext === 'mp4';
            }, ARRAY_FILTER_USE_KEY);
            $path = reset( $html5_files );
        }

        $path_split = array();
        preg_match( "!^(.+?)(?:\\.([^.]+))?$!", $path, $path_split );

        $output = '';
        if( isset( $path_split[1] ) )
        {
            if( ! $image && avia_is_200( $path_split[1] . '.jpg' ) )
            {
                $image = 'poster="' . $path_split[1] . '.jpg"'; // poster image isn't accepted by the player currently, waiting for bugfix
            }
            else if( $image )
            {
                $image = 'poster="' . $image . '"';
            }

            $autoplay = $attributes['autoplay'] == 1 ? 'autoplay' : '';

            if( ! empty( $autoplay ) )
            {
                $autoplay = apply_filters( 'avf_html5_autoplay_mobile', "{$autoplay} playsinline", $video, $attributes );
            }

            $loop = $attributes['loop'] == 1 ? 'loop' : '';
            $muted = $attributes['muted'] == 1 ? 'muted' : '';
            $controls = $attributes['controls'] == 1 ? 'controls' : '';

            if( ! empty( $attributes['preload'] ) )
            {
                $metadata = 'preload="' . $attributes['preload'] . '"';
            }
            else
            {
                $metadata = $attributes['loop'] == 1 ? 'preload="metadata"' : 'preload="auto"';
            }

            $uid = 'player_' . get_the_ID() . '_' . mt_rand() . '_' . mt_rand();

            $output .= "<video class='avia_video' {$image} {$autoplay} {$loop} {$metadata} {$muted} {$controls} id='{$uid}'>";

            if( empty( $html5_files ) )
            {
                if( $path_split[2] == 'mp4' || avia_is_200( $path_split[1] . '.mp4' ) )
                {
                    $output .= '<source src="' . $path_split[1] . '.mp4" type="video/mp4" />';
                }
            }
            else
            {
                foreach( $html5_files as $ext => $source )
                {
                    $html_type = ! empty( $types[ $ext ] ) ? $types[ $ext ] : '';
                    $output .= "<source src='{$source}' {$html_type} />";
                }
            }

            $output .= '</video>';
        }

        return $output;
    }
}

// Remove the original function and replace it with the custom function
remove_action('avia_html5_video_embed', 'avia_html5_video_embed');
add_action('avia_html5_video_embed', 'custom_avia_html5_video_embed');

If this doesn’t help try to modify the function-set-avia-frontend.php starting at line 960 to match the above and see if manually changing it helps.
If it does then great, but the the function-set-avia-frontend.php file can not be overwritten in a child theme so after each update you will need to modify, I’m hoping the above will work for you in your child theme functions.php file.

Best regards,
Mike

Hi,
Please see this thread that I offered to change sub menu items in sidebar menu to drop down, and from this they are asking to create a second level drop down like in the mobile menu.

Best regards,
Mike

Hey leloux,
It is because you are using a custom script that I posted for you in another thread.because you wanted a drop down menu, I see now you have created a mega menu, this will not work, so you must disable it.
Please see the last thread that you opened.
I recommend removing the script and open a Feature Request for the drop down menu as in your last thread.

Best regards,
Mike

Hey reqonsult,
Thank you for the link to your site, this is because the first paragraph is in the “td” and the others are in a “p” which has more specialty.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .all_colors td p {
    font-size: 13px;
    font-weight: 400;
}

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

Best regards,
Mike

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

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

this section is different, for the last solution you were using icons, now you are using h4 text links, I offered the solution to not interfere with other elements.
If you don’t want any links anywhere to be underlined try this css:

#top #wrap_all #main a {
    text-decoration: none;
}

Best regards,
Mike

Hi,
Thank you for your patience, yry adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function center_the_contact_form_ajax_response_after_the_submit_button_is_clicked() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function () {
    var buttons = document.querySelectorAll(".button.av-verify-recaptcha-0.av-recaptcha-submit");

    buttons.forEach(function(button) {
        button.addEventListener("click", function(event) {
            setTimeout(function() {
                var resultElement = document.getElementById("result_ajax_response_1");
                if (resultElement) {
                    resultElement.style.display = 'block'; 
                    var elementRect = resultElement.getBoundingClientRect();
                    var absoluteElementTop = elementRect.top + window.pageYOffset;
                    var middle = absoluteElementTop - (window.innerHeight / 2);

                    window.scrollTo({
                        top: middle,
                        behavior: 'smooth'
                    });
                }
            }, 7000);
        });
    });
});
</script>
  <?php
}
add_action( 'wp_footer', 'center_the_contact_form_ajax_response_after_the_submit_button_is_clicked', 99 );

This will center the contact form ajax response after the submit button is clicked, in my tests the time can be between 5 – 7 seconds while the recaptcha checks before the ajax response is shown. Some of this could be because I’m in a different country, so give this a try and adjust the 7000 at the end of the script to 5000 or 6000 to see what works best for you.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

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

#header .inner-container {
    border-bottom: 1px solid #000;
}
#header_main .inner-container {
    height: 70%;
}
#header_main nav.main_menu {
    bottom: 0;
}
#main .container_wrap_first .av-special-heading {
	margin-top: 0;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
Please see the screenshot in the Private Content area of the expected results.

Best regards,
Mike

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey Jak73,

Please try the following in Quick CSS under Enfold->General Styling:

#header {
  margin-top: -40px;
}

#header .inner-container {
  border-bottom: 2px solid orange;
}

Best regards,
Rikard

Hi,

Great, I’m glad that you found a solution for your problem, and thanks for sharing. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard