Hi,
Glad to hear that you have this sorted out, 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,
Ok then, does it have to have the exact shape as above, or can it be square?
I guess you could use a background image for the shape, but it might be a challenge if you change the number of menu items in the future.
A square shape would be easier since that is the shape of the element.
To use css to add a background color, add the color to the dotsmenu previous css like this:

#top .dotsmenu {
    background-color: red;
}

and then adjust the previous dotsmenu width css to suit.

Best regards,
Mike

Hi,
When I check your H tags & your menu items they all look to be Rift4 is this what you mean?
I see you are using a font plugin that I have not used, I recommend using the theme setting to upload custom fonts Enfold Theme Options ▸ Import/Export ▸ Custom Font Manager and then change the menu font in the theme setting Enfold Theme Options ▸ Advanced Styling ▸ Menu items
Please see our documentation here.

Best regards,
Mike

Hey albertgarduno,
Please link to your page so we can examine and help with the css, I understand that the white line is 100px wide, but how tall? Will this be on all pages or just the one that you link to?

Best regards,
Mike

Hi,
When I checked your site the code above had been removed, I added it back again and now it is working.
The font-family looks to be the same for all of the menu items, I adjusted the color of the sub-menu items to match the parent in case that is what you meant.

Best regards,
Mike

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,
Thanks for the feedback, I’m glad you were able to investigate this further, but unfortunately I don’t know what else we can do to help with this, as we can’t reproduce this and from your explanation it sounds like a red-herring, as you say.
We will go ahead and close this as you pointed out, but feel free to open a new thread if you find new information that will help us reproduce this.
Thank you for your understanding and using Enfold.

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,
The Dev Team has reviewed this and points out that the js file is loaded by WP and only links to the distributed file ../wp-includes/js/dist/vendor/wp-polyfill.js
Enfold doesn’t hotlink to the polyfill.io site, so we will have to wait for WP to apply a patch for this issue as there are a lot of dependencies on wp-polyfill for the block editor and react js.
We will close this thread, but the issue is open here if you wish to comment, thank you for your understanding and using Enfold.

Best regards,
Mike

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

@media only screen and (max-width: 767px) { 
  #footer > .container {
  display: flex; 
  flex-wrap: wrap; 
  }
  #footer > .container .av_one_third.first {
      order: 3; 
  }
}

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,
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

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

#socket > .container {
	display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

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

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