i seemed to sort out the icons – now using some of the options in customise – TOP BAR > CONTENT used items=”icon,count,total”][/topbar_item]

[topbar_item icon=”phone” text=”07770 836 457” link=”tel:07770 836 457”/]

[topbar_item icon=”envelope” text=”sales@fenori.co.uk” link=”mailto:sales@fenori.co.uk”/]

[topbar_item icon=”home” text=”Fenori.co.uk” link=”https://fenori.co.uk/”]

THE social Icons are displayed on the appearance page preview – BUT not on the main website itself

ok, so the links exist – just they match the colour of the header – as i get th hand and if i click – i goto the social media sites – BUT cant see – tried changing colour still no go ????

maybe an issue with icons in the header , as the phone , email and all social icons are NOT showing up n the header – so a generic setting for icons perhaps in the header , I dont use icons anywhere else on site as far as i can remember

no icons showing in the header at ALL – no phone, email or social icons – so i guess an issue with the icons in the TOP BAR

so searching here’s seems icons on CSS and i guess the theme social links no longer work , as the 6.0 update removed the feature to have icons in CSS – so not sure what to do now – I see a plugin but i only load from add plugins – so not sure how to get the zip file loaded – NOT that i want to use the old style – Happy to use the new method – just need a tutorial on how to add exactly , the social media icons – i expected something in the THEME – also not sure why the customise appearance – AlL the icons appear correctly on the preview screen Any HELP – please

No idea why – but today it works , all i did was update an INACTIVE plugin contact 7 form. Nothing else update – so NO idea why it took a few days – maybe unless the theme i downloading and updating something in the background on a PC BUT the phone still is not showing the icons iPhone – with Chrome , but works with safari on the iPhone

Hi,

This is AJ the theme author.

It sounds like you’ve recently updated your site but the browser was using the old cached CSS and not the latest version of the theme’s CSS.

I had a look at your site and the problem is that the child theme is incorrectly set up. The child theme is loading the parent CSS file using the WordPress version number like this: https://a.cl.ly/6quABRP6

It should be loaded with the theme’s version number, otherwise it creates an issue with cache-busting.

This happens when the child theme doesn’t define a version or the parent CSS file.

You will want to update your child theme so the code that loads the parent CSS file looks like this:

wp_enqueue_style(
    'parent-style',
    get_template_directory_uri() . '/style.css',
    array(),
    wp_get_theme( 'Total' )->get( 'Version' )
);

Notice the last parameter pulls the version number from the theme.

If you don’t make these changes you will likely have issues anytime you update the Total theme and there were CSS changes made to the theme.

- AJ

Thanks – Where do i put that code ? Is it the Style CSS file ??

[code] /* Theme Name: Total Child Theme URI: https://themeforest.net/item/total-responsive-multipurpose-wordpress-theme/6339019 Template: Total Author: WPExplorer Author URI: https://themeforest.net/user/wpexplorer Description: Premium Multi-purpose WordPress Theme Tags: custom-colors,accessibility-ready,custom-header,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready Version: 4.9.3.1565810488 Updated: 2019-08-14 19:21:28

*/ [/code]

thanks again – have a great xmas holiday – I wont update the code till the new year now – just need to know where to place the code – I thought BB [] worked here – sorry about the above not sure how to insert code into the forum

Hi,

You don’t add this code anywhere. What you need to do is update your child theme to be coded correctly. So somewhere in your child theme’s functions.php file there is code that uses wp_enqueue_style to load the Total style.css. You need to modify that code to correctly add the theme’s version number using:

 wp_get_theme( 'Total' )->get( 'Version' )

The code you pasted is from your child theme style.css file. You need to modify the functions.php file.

You can compare your child theme functions.php file with the provided child theme to see how it’s different – https://github.com/wpexplorer/total-child-theme/blob/master/functions.php

Or you can share your functions.php code (as long as there is no private data) with me and I can give you the modified version. If you do this please share the code via a 3rd party such as https://pastebin.com/ – so it’s properly formatted. Sharing code here in the ThemeForest comments isn’t ideal.

- AJ

Hope you had a good xmas – thanks for replying so quickly over the holiday

SORRY Not worked out how to PASTE here from that forum – it seems to have auto generated a code when the child theme was created. Nothing init that is private – Just various bits of code from yourself in the past and stuff i picked up from forums

I have just pasted here – While and try and workout how to doit on that link or other

<?php // Exit if accessed directly if ( !defined( ‘ABSPATH’ ) ) exit;

// BEGIN ENQUEUE PARENT ACTION // AUTO GENERATED – Do not modify or remove comment markers above or below:

if ( !function_exists( ‘chld_thm_cfg_locale_css’ ) ): function chld_thm_cfg_locale_css( $uri ){ if ( empty( $uri ) && is_rtl() && file_exists( get_template_directory() . ’/rtl.css’ ) ) $uri = get_template_directory_uri() . ’/rtl.css’; return $uri; } endif; add_filter( ‘locale_stylesheet_uri’, ‘chld_thm_cfg_locale_css’ );

if ( !function_exists( ‘chld_thm_cfg_parent_css’ ) ): function chld_thm_cfg_parent_css() { wp_enqueue_style( ‘chld_thm_cfg_parent’, trailingslashit( get_template_directory_uri() ) . ‘style.css’, array( ) ); } endif; add_action( ‘wp_enqueue_scripts’, ‘chld_thm_cfg_parent_css’, 10 );

// Wayne Added to show SKU in products page, After title add_action( ‘woocommerce_single_product_summary’, ‘dev_designs_show_sku’, 5 ); function dev_designs_show_sku(){ global $product; echo ‘SKU: ’ . $product->get_sku(); }

// Wayne added to add the SKU number to category listing function shop_display_skus() { global $product; } add_action( ‘woocommerce_after_shop_loop_item’, ‘shop_display_skus’, 9 );

if ( $product->get_sku() ) {
    echo ' SKU: ' . $product->get_sku() . ' ';
}

// Wayne added to remove shipping to: message /** * snippet Hide "Shipping to..." WooCommerce Cart * @how-to Get CustomizeWoo.com FREE * @author Rodolfo Melogli * @compatible WooCommerce 6 * @community https://businessbloomer.com/club/ */

add_action( ‘woocommerce_before_cart’, ‘bbloomer_hide_shippingto’ );

function bbloomer_hide_shippingto() { echo ’<style>.woocommerce-shipping-destination{display:none}</style>’; }

// Wayne added code – because the theme removed the default woocommerce fort style – 12 june 24 add_filter( ‘totaltheme/editor/editor_styles/tiny_mce/editor_id_list’, function( $list ) { $list[] = ‘excerpt’; return $list; } );

//Wayne Added Code function to show shipping Address , even if local pickup – 16-June24 function show_ship_add_for_local_pickup( $needs_address, $hide ) { $needs_address = true; return $needs_address; } add_filter( ‘woocommerce_order_needs_shipping_address’, ‘show_ship_add_for_local_pickup’, 10, 2 );

Hi,

Oh ok, it looks like you may have used some sort of child theme generator plugin to create the child theme which doesn’t generate it correctly and also adds unnecessary code to load an RTL stylesheet.

So what you want to change is line 19 which looks like this:

wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( ) );

You would delete that completely and replace with this code:

wp_enqueue_style(
    'parent-style',
    get_template_directory_uri() . '/style.css',
    array(),
    wp_get_theme( 'Total' )->get( 'Version' )
);

You should also be able to delete lines 8-15 because this code is used to load an RTL stylesheet which you don’t use on your site:

if ( !function_exists( 'chld_thm_cfg_locale_css' ) ):
function chld_thm_cfg_locale_css( $uri ){
if ( empty( $uri ) && is_rtl() && file_exists( get_template_directory() . '/rtl.css' ) )
$uri = get_template_directory_uri() . '/rtl.css';
return $uri;
}
endif;
add_filter( 'locale_stylesheet_uri', 'chld_thm_cfg_locale_css' );

Keep in mind that if you make any errors in your child theme functions.php file it could cause your site to crash and you won’t be able to log back in via WP. So it’s highly recommended to make the changes via FTP so if you refresh the site and it’s down you can revise and fix your code. It’s never advised to edit the files via the WP admin (Appearance > Theme File Editor) – in fact this should be disabled for security reasons – https://developer.wordpress.org/advanced-administration/wordpress/wp-config/#disable-plugin-and-theme-update-and-installation

- AJ

Thanks so much – for that , I did not realise that i should not EDIT in the theme BUT using FTP I have FTP access and copy that complete set as a backup every couple of weeks any way I’ll look and see where the functions file is located and check

Hi,

Last year I moved the support site over to this domain – https://my.totalwptheme.com/ – but I didn’t migrate all the users (for good reason). But the site never allowed you to log in with your own credentials before. Previously you always had to log in with your Envato account.

I had a look and I don’t see your username added to the new site. So you will need to go here – https://my.totalwptheme.com/log-in/ – and click on the green button “Continue with Envato” so that it can connect to your Envato account, verify licenses and add you to my site. Once you are added to the site you can then continue logging in with Envato or you can set your own password – https://my.totalwptheme.com/reset-password/ – and use your email/password to log in.

Once logged in you can view and manage all licenses under the License Manager tab – https://my.totalwptheme.com/license-manager/

Licenses shouldn’t ever get automatically removed by the theme. The only code in the theme that removes the license would happen if you visit the license page and the current domain doesn’t match the license on my API, then it gets removed.

Another possibility is that due to legal reasons last year I removed the ability to activate a license in “developer mode” so if those sites were active in dev mode then it’s possible they got deactivated.

Let me know if you have any issues logging into the licensing/support site!

- AJ

hi, ok, found out the custom link should be only ”#” instead of ”#al”

hmm, is there no way to set a “none” hover animation for feature boxes?

HI again AJ. I have not heard back from you yet on this, so I did some more digging. I noticed the Dynamic Template input field looks different in a screenshot you have used in your documentation, compared to what it looks like in my UI. Any ideas what is causing this? See image at link below.

Hi,

Thank you for your patience. I had to go AFK the last couple days dealing with a family matter.

This is actually a bug!

I am patching it right now for the next update. For the meantime what you can do is enter the template ID into the field which you can find in the admin page: https://a.cl.ly/JruQwy2k

Sorry for the troubles and thank you for reporting it!

- AJ

ps: If you want to fix the bug it’s actually really simple. You would edit the file at plugins/total-theme-core/inc/post-series.php and change line 148 from:

'type' => 'wpex-dropdown-templates',

to:

'type' => 'totaltheme_template_select',
'template_type' => 'archive',

See here: https://a.cl.ly/4guL74kv

You can also just enter the ID as I mentioned before. And I am planning to release the next theme patch, most likely over the weekend.

- AJ

Thanks AJ. I made the change in the .php file and the proper dropdown appeared. I am not using a child theme (yet) but I guess my change will be overwritten by your same change next time I update. I was unable to get the result I wanted with the template for the post series, but have parked that for now. I wanted to incorporate an image in the post series “box” but have been able to achieve something similar by placing an image above and using a negative CSS margin.

Correct, your change will be overwritten which is why I mentioned that you could patch it yourself.

I’m not sure what you want to do exactly, but Total does have the ability to assign images to taxonomies by default. So you can give your post series a photo via the image field: https://a.cl.ly/GGubAvee – this image can then be shown on the archives via the Image element added to the Post Series dynamic template.

If you are using the theme’s page header on the site it will display as a background behind the page title. Example: https://totalwpthemedemo.com/blogdotnom/category/recipes/

By default any taxonomy term with an image will swap the page header title to the background Image style unless disabled via the Theme Panel’s Taxonomy Thumbnail Page Header setting.

Now, if you are trying to display this image on the post itself it is possible to use some custom code to insert the post series photo before the output of the Post Series element. Personally I think it would just bloat things up.

Also if you create a dynamic template for your posts. You can display your post series easily using the Post Cards element like such: https://a.cl.ly/llue4vbq – you aren’t forced to use the default post series element which just shows a list. You can instead display cards which can be shown in various formats (grid, carousel, etc) and with any design you want.

- AJ

Hi AJ. Thanks for this additional advice. I had moved on to other parts of the site but have now returned to this. I have tried some different of achieving the result I was after. Ref this screenshot: https://1drv.ms/i/s!AjFG0Wwo4gi7iv59CBYi7vLvFYxeng?e=at1t1h

The live page is here: https://combat.academy/metharc2025a/article/hydrogen-from-natural-gas/

Referring to the numbered annotation in the shared image…

(1) This was my first attempt. I quite like that offset image style. One problem is that the image gets displayed even for posts that are standalone and not part of a series (such as the one at (4)) as I am choosing the primary Term (Category) image. This could be avoided if I could choose the post series image as the image source but I do not see that available in the dropdown. Can I use a custom field name?

(2) Another variation I tried today using an inner row, but it has the same issue for single posts not part of a series.

(3) Tried you suggestion of using post cards (list 1) but the current post is not listed and the numbering is “dynamic” so I am not sure that this will work “out of the box”.

Also, previously you helped me with the fix to reveal dynamic template names in the post series customizer dropdown, but I wonder if there is another bug as even though I change the dynamic template for the post series nothing actually changes when viewing the page.

Hi,

1. Having the ability to select the post series image would be very useful. I am going to add that setting in the next update.You can’t just use a custom field because the custom field option will search for a custom field of the post itself, it needs to pull the meta value from the post series.

If you want to edit the files on your site to add the option to select the Post Series Image it’s very easy!

First edit the file located at plugins/total-theme-core/inc/vcex/shortcodes/image.php and scroll to the bottom where you will find the get_source_choices() function where you will add the new Post Series Image setting like this:

esc_html__( 'Post Series Thumbnail', 'total-theme-core' ) => 'post_series_thumbnail',

Screenshot of the edit: https://a.cl.ly/mXuNAKYB

Now you will want to edit the file at plugins/total-theme-core/inc/vcex/helpers/get-image-from-source.php and add a new method to the class:

/**
 * Get post series thumbnail image.
 */
protected function get_post_series_thumbnail_image() {
    if ( \taxonomy_exists( 'post_series' ) && \function_exists( '\wpex_get_term_thumbnail_id' ) ) {
        if ( \is_tax( 'post_series' ) && ! \vcex_is_card() && ! \in_the_loop() ) {
            $this->image = \wpex_get_term_thumbnail_id( get_queried_object_id() );
        } else {
            $post_series = get_the_terms( get_post(), 'post_series' );
            if ( ! is_wp_error( $post_series ) && ! empty( $post_series[0]->term_id ) ) {
                $this->image = \wpex_get_term_thumbnail_id( $post_series[0]->term_id );
            }
        }
    }
}

Sample screenshot (so you can see where I put it) – https://a.cl.ly/jkujQ4Wr

2. You could define a custom template just for posts that are a part of a series. Example snippet: https://totalwptheme.com/docs/snippets/post-series-singular-dynamic-template/

3. When using the Post Cards you would use the “Related by Taxonomy” query Type – https://totalwptheme.com/docs/related-items-dynamic-template/ – so you don’t select the “current post”, the theme will pull items from the current post’s related taxonomy automatically for you. Simply select “Post Series” as your related taxonomy.

4. The option in the Customizer is for the post series archive (the page where you can view all the posts assigned to the specific post series), not the singular post. Are you checking the archive to make sure it’s changing? I just tested and the option is working as expected.

I could add the option to define a singular template for the Post Series posts. I do think it would be useful so you don’t have to use code like the snippet provided above.

- AJ

Thanks AJ! I will try the code changes you suggested at (1) and (2). As I have become more familiar with the theme I have realized that there are other ways to achieve what I wanted to do but agree that since we have the ability to associate an image with a post series, it will be useful to be able to select this image directly from the dropdown.

For (3) the “problem” I have with using cards in this case is that it returns a list of the “other” posts in the series only, not including the one currently being viewed. I was after an option similar to how the post series element works, where (say) if I have 3 posts in the series and am on a page viewing the 1st post, all 3 post titles are listed, with the 1st one (currently viewing) being greyed out and the 2 others being clickable links. In any case I will continue using the post series element itself which handles this the way I want.

For (4) I may have misunderstood things. When I click to edit a post series element I see this message: “Go to Appearance > Customize > General Theme Options > Post Series to customize this global element”. So I though I could go to the customizer and change this post series element completely. But it appears that I can only change things like background color, border color etc and not the complete design of the element. That is OK. I have the tools I need to make this work now.

Thanks again.

Quick update: I tried the code changes to reveal and use the series thumbnail – works great!

I also tried the snippet you shared under point (2). Could not get it to work. I want to use this for a custom post type called “article” so I made changes to your code after my initial try (see below), but it did still not work.

I suspect this is because under post types I have defined a custom dynamic template to use with these articles and that this overrides the code snippet. Any suggestions?

``` /** * Define a custom template to use with articles that are part of an article series. */ add_filter( ‘wpex_singular_template_id’, function( $template_id ) { if ( ! is_singular( ‘article’ ) ) { return $template_id; // only apply to the standard post post type. } if ( taxonomy_exists( ‘article_series’ ) ) { $article_series = get_the_terms( get_article(), ‘article_series’ ); if ( ! is_wp_error( $article_series ) && $article_series ) { $template_id = ‘1032’; // !!! EDIT THIS !!! } } return $template_id; } ); ```

Sorry for the formatting, I though I could use markdown here…

Hi,

When displaying iFrames on your site you would generally have all the styling done on the page that you are embedding since you can’t target inner iFrame elements with CSS.

Your example would be an iFrame doesn’t make much sense to be because there isn’t an iFrame and it implies that you want it opened with lightbox.

If you want to open an iFrame in Lightbox/Modal you have 2 options:

• https://totalwptheme.com/docs/modal-dialogs-html/ (ideal, modern method that uses native browser modals)
• https://totalwptheme.com/docs/inline-lightbox/ (easier but uses jQuery and extra lightbox scripts)

In terms of just adding an iFrame though to your page you would use the WPBakery HTML element or the Gutenberg HTML element (depends on the context and if you are using WPBakery or not).

If you can provide more details. Maybe an example of what you want exactly and the URL you want to embed into an iFrame I can be more helpful.

- AJ

ps: I forgot to mention, the theme has utility classes you can use to apply styling to elements without adding extra CSS to your site – https://totalwptheme.com/css-framework/

I have reviewed the information you have written above. I would like to clarify some details.

If you can provide more details. Maybe an example of what you want exactly and the URL you want to embed into an iFrame…

I’d like to add the ability to launch a demo game slot to the page. For example:

• Like this https://tinyurl.com/2wwj7uh3 (if you click on the “Play demo” button, a window opens. And in the upper right corner there is a “Close” button).
• Or like this https://tinyurl.com/ytvcy2nw (if you click on the “Play demo” button, the frame starts right inside the page)

...ideal, modern method that uses native browser modals

I tried to do this by adding a modal dialog using HTML. The code looks like this:

<dialog id="popup-1" class="wpex-modal">
<div class="wpex-modal__inner">
<iframe width="667" height="375" src="https://player.eu.regulated.pushgaming.com/mesh/b2c/igp/dm-verajohn/launch?rgsCode=hive&rgsGameId=bigbamboo-01&mode=DEMO&lang=sv&country=EN&ccyCode=EUR&jurisdiction=MT"></iframe>
</div>
</dialog>
<button aria-controls="popup-1" class="wpex-open-modal theme-button">Popup</button>

In this case, when you click the “Popup” button, a modal window opens. But inside it, just a black screen is displayed. Like this https://ibb.co/WKBSTNm.

Hi,

Your code looks correct, but when I try it out I see errors from the player itself: https://a.cl.ly/OAudRPDm – the iFrame is working as expected the issue is on the other end.

One thing I want to mention though, if you want to display many of these I would highly recommend a custom post type – https://totalwptheme.com/docs/adding-custom-post-types/ – with a custom field to define your iFrame – https://totalwptheme.com/docs/snippets/add-custom-metaboxes-to-total/ – then you can create a custom card to display them all – https://totalwptheme.com/docs/custom-card-builder/

And you can make your code dynamic like such:

<dialog id="popup-{{post_id}}" class="wpex-modal">
<div class="wpex-modal__inner">
<iframe width="667" height="375" src="{{cf_KEY}}"></iframe>
</div>
</dialog>
<button aria-controls="popup-{{post_id}}" class="wpex-open-modal theme-button">Popup</button>

Notice the use of “{{post_id}}” which is a dynamic variable – https://totalwptheme.com/docs/dynamic-variables/ – this allows each popup to have a unique ID so they don’t conflict.

And the iframe URL is added using the custom field variable, so you would need to modify it to use your custom field ID (aka, change KEY for your meta key ID).

Of course this code wouldn’t check if a field exists, so the assumption is all items have a popup. If you need if/else checks then the code would need to be added in a custom shortcode via a child theme or code snippet plugin.

- AJ

Hi,

Thanks for the information.

...if you want to display many of these I would highly recommend a custom post type

No, I plan to use such an iframe only on one page of the site. In this regard, at the moment I do not see the need to use a custom post type.

Your code looks correct, but when I try it out I see errors from the player itself.

I decided to experiment with the code and this is what I got.

If I use this link

src="https://player.eu.regulated.pushgaming.com/mesh/b2c/igp/dm-verajohn/launch?rgsCode=hive&rgsGameId=bigbamboo-01&mode=DEMO&lang=sv&country=EN&ccyCode=EUR&jurisdiction=MT"

in an iframe by adding a modal dialog using HTML, it will not work.

But if I simply add an iframe to the page with this same link (without adding a modal dialog using HTML), it will work. Moreover, if you look in the DevTool console, there will be the same errors that were indicated here https://a.cl.ly/OAudRPDm/

This is the code that works:

<iframe width="667" height="375" src="https://player.eu.regulated.pushgaming.com/mesh/b2c/igp/dm-verajohn/launch?rgsCode=hive&rgsGameId=bigbamboo-01&mode=DEMO&lang=sv&country=EN&ccyCode=EUR&jurisdiction=MT"></iframe>

This was for example, because this method of inserting iframe does not suit me.

Based on the above, I have a question. Could it be that the error loading the iframe inside the modal window occurs because of the method of adding a modal dialog using HTML?

I would also like to add the following. If I use a modal dialog using HTML and add another link in the src attribute with the same demo slot, it will work. Here is the code:

<dialog id="popup-1" class="wpex-modal">
<div class="wpex-modal__inner">
<iframe width="667" height="375" src="https://www.pushgaming.com/games/play/big-bamboo.html"></iframe>
</div>
</dialog>
<button aria-controls="popup-1" class="wpex-open-modal theme-button">Popup</button>

I have encountered a problem. I embedded the code below on the page I need via Gutenberg Editor (because I didn’t know how to do it via wpbakery page builder):

<dialog id="popup-1" class="wpex-modal">
<div class="wpex-modal__inner">
<iframe src="https://www.pushgaming.com/games/play/big-bamboo.html" style="position:fixed; top:0; left:0; bottom:0; right:0; width:90%; height:90%; border:none; margin:auto; padding:0; overflow:hidden; z-index:999999;"></iframe>
</div>
</dialog>
<button aria-controls="popup-1" class="wpex-open-modal theme-button">Demo</button>

Now I can’t go back to editing this page via wpbakery page builder. As soon as I try to do this, an iframe starts right in the editor.

Can you tell me how to correctly embed such code on the page so that there are no errors in the future?

Hi,

By default the dialog element is hidden, my guess is that the page you are trying to load in the iFrame has javascript that runs when the page loads but because the initial iFrame is hidden it causes an issue…But I see that you’ve modified the code so that the iframe is inside another page (your second screenshot) and this will work correctly!

The problem with the second code though is the inline CSS which set’s the iFrame to a fixed position so it’s going to display over the editor.

You’ll probably need to remove the code from Gutenberg first. If you can’t via the editor you may need to swap to code mode first: https://a.cl.ly/z8u9wG7W – then in WPBakery you can add this via the HTML editor.

What I would personally recommend though is to instead place your code in your child theme functions.php file as a custom shortcode – https://totalwptheme.com/docs/child-theme/

Example code:

add_shortcode( 'big_bamboo_popup', function() {
    ob_start();
    ?>
    <dialog id="big-bamboo-game" class="wpex-modal">
        <div class="wpex-modal__inner">
        <iframe src="https://www.pushgaming.com/games/play/big-bamboo.html" height="600" width="600"></iframe>
        </div>
        </dialog>
        <button aria-controls="big-bamboo-game" class="wpex-open-modal theme-button">Play Bamboo Game</button>
    <?php
    return ob_get_clean();
} );

Then you can use your shortcode ( [big_bamboo_popup] )anywhere you need it and you can always edit it globally via the child theme. This way there aren’t any concerns with the iFrame trying to render while in the editor as it will just show up as the shortcode in plain text.

Here is a video showing the code above working: https://a.cl.ly/p9u4zeKZ

Also you can change the width and height of the iFrame to fit your needs. I set it to 600×600 for the example.

- AJ

Hi,

The theme’s javascript for the mobile menu was optimized to use modern defer attributes like such: https://a.cl.ly/KouRyb76

Unfortunately some sort of “optimization” plugin is incorrectly combining the optimized scripts and adding them without proper deferring causing JS errors on the site: https://a.cl.ly/RBub7xyP – I can’t tell what plugin is doing that since there is no clear commenting in the source code, but customer usually only have a single optimization plugin enabled or it’s done via the hosting so it should be clear to figure out what is causing the issue.

Now, combining scripts is out-dated tactics. It can actually slow down your website when using modern HTTP/2+ protocols. So it’s generally no longer recommended to combine scripts. So personally I would recommend you disable any script combining on the site, which should fix the issue but also allow your site to render faster.

Additionally, I have seen some incorrectly coded optimization plugins also remove the defer attribute when “minify” is enabled. The theme’s scripts are already minified anyway so there is no point to run extra server resources minifying what’s already minified. So if your optimization plugin is also minifying theme scripts it’s best to exclude the theme from that.

In fact looking at your site it appears the theme’s CSS files are being modified (no apparent issues) – but again, the theme’s CSS is already optimized so no point in having another plugin modify them.

- AJ

Hi AJ, thanks for your help. There was a pluging to optimize pages, I’ve deactivated and our web is ok again.

many thanks Sonia

Great, thanks for letting me know Sonia.

Any chance you can tell me the name of the plugin? This way I can test it and recommend a fix to the plugin developers. Thank you!

Of course, this was the plugin: Page Optimize from WordPress.com

Optimiza el JS y el CSS para una carga y proceso más rápido de la página en el navegador.

Thanks again, AJ

Hi,

This is AJ the theme author.

Can you please share the URL?

Since it works fine while in the Customizer, there are 2 things I can think of:

1. You are using an optimization plugin that incorrectly modifies the theme’s mobile breakpoint CSS files. This is a known bug in many plugins. I reported it to Total Cache for example: https://wordpress.org/support/topic/plugin-removes-css-media-attribute/

2. You are using a plugin that is loading the whole Bootstrap CSS framework (always a bad idea) – and this can cause issues like the one you mention.

If you share the URL I can confirm exactly what’s going on.

- AJ

Thanks for the quick response AJ!

Site link: https://combat.academy/metharc2025a/

Also worth mentioning, I am running two other Total theme sites on this multisite. They did not experience this problem. Also, if I switch over to the default WP theme, the menu is visible.