Hi,
It looks like you had this thread that was for a different donain and the css you added creates the black bar by adding padding to the top, I removed it for you.

Best regards,
Mike

Hi,
It looked like you added many menu options in the Enfold Theme Options ▸ Advanced Styling and each was empty so the empty setting was overriding the Enfold Theme Options ▸ General Styling settings. I removed these for you and now your menu is back to the way it was.
If you want to use the Enfold Theme Options ▸ Advanced Styling to change the colors then you can, but to need to add the new colors for it to work.
I believe that we have solved your Header Widget that was the topic of this thread, please let us know if so we should now close this thread.
Please note that we ask that each thread stays on a specific topic, this helps other users and Mods. For further questions please open a new thread

Best regards,
Mike

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

function avf_magazine_entries_query_mod($query, $params)
{
if (is_page(3961)) {
$query['order'] = 'ASC';
}
return $query;
}
add_filter('avf_magazine_entries_query', 'avf_magazine_entries_query_mod', 10, 2);

adjust the page ID to suit.
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:

then add the above code and save.

Best regards,
Mike

Hi,
When I check your mobile menu items they do not include any attributes, such as the proper classes:

The parent menu items have classes, but all menu items should have classes, I also don’t know why each menu item is wrapped in a “sub-menu” ul
this is what they should look like:

note that the current menu item has the class current-menu-item this is what tells the css to highlight it, without classes it won’t work.
Your desktop menu seems to be correct.
So I don’t know if this is a plugin conflict or if you have some customization in your child theme because the theme editor is not showing so I can’t see the child theme functions.php.
Do you know if you have any customizations that might remove the classes?
Do you want to create a staging site for us the test on?

Best regards,
Mike

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

Hi,

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

Best regards,
Rikard

Hey pnamroud,
Our current version is 5.7
If you are using the Advanced Layout Builder to create your posts you could add a widget element to your posts and add the TOC widget to the sidebar displayed in the widget element.

If you are using the WordPress editor for your posts you could try this javascript TOC, first add this code to your post: <div id="toc"></div> in the “text” tab:

Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor, 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:

then add this code and save.

function custom_toc_script() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    htmlTableOfContents();
} );                        

function htmlTableOfContents( documentRef ) {
    var documentRef = documentRef || document;
    var toc = documentRef.getElementById("toc");
	var content = document.querySelector(".single-post .entry-content"); 
	var headings = content ? [].slice.call(content.querySelectorAll( "h1, h2, h3, h4, h5, h6")) : []
    //var headings = [].slice.call(documentRef.body.querySelectorAll('#content h1,#content h2,#content h3,#content h4,#content h5,#content h6'));
    headings.forEach(function (heading, index) {
        var ref = "toc" + index;
        if ( heading.hasAttribute( "id" ) ) 
            ref = heading.getAttribute( "id" );
        else
            heading.setAttribute( "id", ref );

        var link = documentRef.createElement( "a" );
        link.setAttribute( "href", "#"+ ref );
        link.textContent = heading.textContent;

        var div = documentRef.createElement( "div" );
        div.setAttribute( "class", heading.tagName.toLowerCase() );
        div.appendChild( link );
        toc.appendChild( div );
    });
}

try {
    module.exports = htmlTableOfContents;
} catch (e) {
    // module.exports is not defined
}
	  </script>
  <?php
}
add_action('wp_footer', 'custom_toc_script');

This is the result:

There are many TOC plugins available, if you would like a different style, the RankMath SEO plugin also includes a TOC that works with Enfold.

Best regards,
Mike

Hi,
Try this CSS instead, and adjust the font size to suit.

#top.home #av_section_2 .avia_textblock > h2 > a:hover strong,
#top.home #av_section_2 .avia_textblock > h2 > strong a:hover {
	color: #a62c0a;
	font-size: 40px;
}

Best regards,
Mike

Hey Intell,

Please try the following in Quick CSS under Enfold->General Styling to align the logo on mobile devices:

@media only screen and (max-width: 767px) {
  .responsive #top .logo {
    position: static;
    display: table;
    height: 80px !important;
    float: none;
    padding: 0;
    border: none;
    width: 60%;
  }
}

When you have activated the child, then please go to Enfold->Import/Export and import the parent theme settings. If your settings don’t apply after that, then please try to save the theme options in order to regenerate the theme resources.

Best regards,
Rikard

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

#top.home #av_section_2 .avia_textblock > h2 > a:hover strong,
#top.home #av_section_2 .avia_textblock > h2 > strong a:hover {
	color: #a62c0a;
}

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 Chris_85,
Thank you for your patience, when the product filters are used the page is reloaded, this is why the page is then shows at the top, to work around this I would recommend adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function restore_the_scroll_position_after_reload() { ?>
  <script>
window.addEventListener('beforeunload', function() {
    localStorage.setItem('scrollPosition', JSON.stringify({
        path: window.location.pathname,
        position: window.scrollY
    }));
});
window.addEventListener('load', function() {
    const saved = JSON.parse(localStorage.getItem('scrollPosition'));
    if (saved && saved.path === window.location.pathname) {
        window.scrollTo(0, saved.position);
    }
});
</script>
  <?php
}
add_action( 'wp_footer', 'restore_the_scroll_position_after_reload', 99 );

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:

then add the code and save. Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Below you can check my test page where I have a large space and then the product grid and when the filter is used and the page is reloaded the page shows at the same place.
But when I test this on your page by injecting it via the browser it seems to work by scrolling back to the correct location after the top of the page is seen. This doesn’t occur on my test page. On your page in the browser console I see the message: Scrolling to section was successful or max attempts reached., this seems to come from a custom javascript file in your child theme: /enfold-child/inc/js/jongo-js.js try disabling the custom this javascript, if you need the custom javascript then perhaps this behavior will be acceptable.

Best regards,
Mike

Hey rixi,
Please go to the maintenance mode option and then enable it, then in the dropdown that shows the list of pages choose the top choice “select page”, then disable the maintenance mode option and save the theme settings.

Best regards,
Mike

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

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,

You can use the following css code to adjust the style of the Special: Email Icon:

#top #wrap_all .av-social-link-mail:hover a {
    background-color: transparent !important;
    color: #a7a7a7 !important;
}

If you need more assistance, please feel free to open another thread.

// https://kriesi.at/support/forum/enfold/#new-post

Best regards,
Ismael

Hi Hans,

The update to 5.7 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the new theme files via Appearance->Themes->Add New, and select to overwrite the old theme files after the upload has finished.

If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/theme-registration/

Best regards,
Rikard

Hi,

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

Best regards,
Rikard