Amjad Ali

Hey,

Thank you for reaching out to us!

I checked your website and noticed that it’s currently using the YITH Wonder theme. Could you confirm if you switched from Extendable due to any specific issue? Or are you planning to continue with Yeti Wander for now?

If you were using the Extendable theme and encountered these issues, could you please share some screenshots highlighting the problems? This will help us understand what went wrong and provide the best possible assistance to resolve it.

Looking forward to your response!

CSS is only for fixing the overlap issue, not for the drop-down menu. If you’re facing a drop-down menu issue, I think the language selector needs to have the same settings as the other menu so they look identical. It seems that in one menu, you’ve chosen to display the flags, while in the other, you’ve selected a drop-down menu. You need to ensure both menus have the same settings. Am I understanding this correctly, or are you asking something else? If yes, could you please share a screenshot of the issue? That will help in understanding it better.

Thanks for providing more details!

It’s not a theme-related problem. This theme is built using block-based technology, and the free version of Polylang is not doesn’t support block-based themes. , you’re running into compatibility issues. However, there’s a workaround you can follow to still manage multilingual menus without adding any custom code.

Step-by-Step Guide to Set Up Polylang Multilingual Menus with a Theme:

1.  Install the Site Editor Classic Features Plugin:
?   Since Polylang free version lacks full support for block-based themes, this plugin will help bridge the gap.
?   Go to your WordPress dashboard, navigate to Plugins > Add New, search for Site Editor Classic Features, and install the plugin.
?   Activate it once installed.
2.  Create Menus for Each Language:
?   Navigate to Appearance > Menus and create separate menus for each language.
?   English Menu: Add your English menu items.
?   German Menu: Add your German menu items.
?   Italian Menu: Add your Italian menu items.
?   Also add Language switcher in each menu
3.  Replace the Navigation Block with Legacy Widget Blocks:
?   Open the Site Editor and navigate to your header template.
?   Remove the existing Navigation Block.
?   Inside the Legacy Widget Block, select the Navigation Menu. 
?   Choose the relevant language menu (English, German, or Italian) from the widget options.
4. Add Three Legacy Widget Blocks:
? Add three Legacy Widget Blocks to replace the navigation block.
? In each Legacy Widget Block, select the Navigation Menu.
? For each block, choose the relevant language menu:
? First block: Select the English menu.
? Second block: Select the German menu.
? Third block: Select the Italian menu.

Here is a step-by-step video demonstrating the steps mentioned above.

Here is a custom CSS to solve the hidden submenu issue. Go to Site Editor > Styles > Additional CSS and add this CSS.

.widget_nav_menu .sub-menu {

    background: var(--wp--preset--color--background); 
    z-index: 999;
    padding: 12px 12px;
}

Hi!

Thank you for reaching out. It looks like your current approach to creating a multilingual menu in the header using Polylang isn’t the most efficient solution for block-based themes. There are simpler and more effective ways to manage multilingual menus.

There are two approaches to managing multilingual menus with Polylang:

Approach 1: Recommended for Ease and Flexibility

it’s recommended to use Polylang Pro. This version includes a Language Switcher Block, which automatically manages your multilingual menus with minimal setup.

Approach 2: Custom Solution with a Simple Shortcode

If you prefer to stick with the current setup, you can implement a custom shortcode solution that works seamlessly with Polylang’s dropdown feature. Here’s a simple approach to achieve this:

Rather than adding the code directly to your theme’s functions.php file (which might be lost during theme updates), it’s better to create a custom plugin. This ensures your code remains safe during updates.

1. Create a folder in wp-content/plugins/ called polylang-language-switcher.
2. Inside this folder, create a file named polylang-language-switcher.php and add the following code:

<?php
/**
 * Plugin Name: Polylang Language Switcher
 * Description: Shortcode for displaying Polylang language switcher as a dropdown select.
 */

function polylang_language_switcher_shortcode() {
    if ( function_exists( 'pll_the_languages' ) ) {
        return pll_the_languages( array(
            'dropdown'    => 1,  // Enable dropdown list
            'show_flags'  => 1,  // Show language flags
            'show_names'  => 0,  // Hide language names
            'echo'        => 0   // Return the output instead of echoing it
        ));
    }
    return 'Polylang is not active.';
}
add_shortcode( 'polylang_language_switcher', 'polylang_language_switcher_shortcode' );

Once you’ve created the plugin, go to Plugins in your WordPress dashboard, activate Polylang Language Switcher, and you’re good to go.

Insert the Shortcode: You can now insert the shortcode [polylang_language_switcher] anywhere on your site (in posts, pages, or header) to display the language switcher as a dropdown. Use the Shortcode Block to add this shortcode.

However, note that Polylang’s dropdown mode does not display flags by default. If you want to display flags, you’ll need to switch from a dropdown to a list view. To do this, simply modify the code by changing ‘dropdown’ => 1 to ‘dropdown’ => 0. Using the list view will allow you to display both flags and language names, but additional styling might be needed.

Let me know if you have any further questions!

Hey,

Thank you for reaching out.

It seems like Elementor and your theme’s Gutenberg-based header and footer are conflicting, which is common when both page builders are used to manage the layout. Elementor tends to override the theme’s header and footer when activated.

To resolve this, decide whether you want to use Elementor’s or the theme’s header and footer:

1. Disable Elementor’s Header/Footer:

Go to Elementor > Settings, under the General tab, and uncheck the option that allows Elementor to control the header and footer. This will ensure the theme’s Gutenberg-created header and footer are displayed.

2. Use Elementor’s Theme Builder:

If you prefer using Elementor for the entire layout, including the header and footer, recreate them using Elementor’s Theme Builder.

Thank you for the helpful and for the screenshot!

Could you please edit the cover block and remove the class ext-import from the block?
You can find the class input field by selecting the block, navigating to the right sidebar under “Block” settings, and expanding the “Advanced” section. In this section, you’ll see the “Additional CSS Class(es)” field.

This should resolve the issue. Please let me info if the issue persists.

• This reply was modified 1 month, 3 weeks ago by Amjad Ali.
• This reply was modified 1 month, 3 weeks ago by Steven Stern (sterndata).

Hi,

I’m sorry to hear you’re experiencing this issue. To help troubleshoot, could you let me know if this problem is happening only with the text and button in the Cover Block, or if other content is also disappearing?

It would also be helpful to know which plugins you have installed. Do you have any backup plugins or automated backup systems running on your site?

Additionally, could you try creating a new page and adding the same Cover Block with text and a button to see if the issue persists on that page?

Thank you for the helpful information!

To achieve this, you need to do these two things:

1. Create a Page Template with a Sidebar: This template will include the sidebar with navigation.

2. Assign the Newly Created Page Template: Apply this template to the specific pages where you want the sidebar to appear.

Here’s a step-by-step video that shows how to create a page template with a sidebar and assign it to specific pages: https://youtu.be/QQ1wZiOkDrs

Hey Achimes,

Thanks for reaching out! I’d be happy to assist you with creating a sidebar vertical menu. To better understand your needs, could you provide a bit more information?

• Are you looking to place this vertical menu on a specific page or pages or across all site pages?
• Would you like to keep the main top horizontal navigation as well?
• If possible, could you share a screenshot or an example of the layout you’re envisioning? This will help us provide a solution tailored to your needs.

Hi, Thanks for trying to add the SSL certificate.

I checked the nailstyle.dk site, and it seems the fonts are hosted on the staging site nailstyle.dk.linux93…(non-ssl site) and being requested on nailstyle.dk. The staging site does not have an SSL certificate, therefore the issue persists.

To resolve the issue, could you please remove and reinstall the fonts on nailstyle.dk? I hope this will fix the issue. Let me know if it works.

The reason why the fonts work fine on your computer but not on mobiles is that the fonts might be installed on your computer, but for phones, the fonts need to be loaded from the website.

Hello,

I checked and found a mixed content error in console log indicating that the font URL was loaded over HTTPS but requested on a non-SSL site. This request has been blocked; the content must be served over HTTPS. This might be the issue causing the font styles not to be applied. Could you please add an SSL certificate and check if it works?

Hi,

To make content full width, you can choose the option from the Block toolbar to make it wide or full-width. Here’s how to do that:

1. Edit the block: Click to edit the desired block.
2. Click the alignment icon: In the block controls bar, click the alignment icon.
3. Choose alignment: Select the wide or full alignment option from the alignment dropdown.

Here is a quick video on how to set the width to wide or full width: Watch the video

Some blocks do not have alignment options. For these, you can place them inside a Group block and change the alignment of the Group block.

If the above solution does not work for you, please let us know. If possible, share a screenshot or video of the page so we can have context and provide a solution accordingly.

Thanks