Styling issue on duplicated element

[boomfly]

Hi there,

I have a strange situation where I have a Header and in it I have duplicated a Content Area Off Canvas element that contains a Global Block. In the Global Block is an image and a Navigation Menu Collapsed. Both appear correctly in the Pro preview but on the live site the duplicated element isn’t showing any of the styling for elements within the Global Block. It’s kind of being stripped of it.

Here is a video of the bug. https://drive.google.com/file/d/1gj-ZffskIOSS9nQPdIxVLIuaLIp3Y-OV/view

You can view this on the live site (link in secure note) but I’ve moved the duplicated element to the sticky bar that appears as you scroll. It’s showing the same issue.

I’d be interested to see if you can work out what’s going on.

Thanks

[marc_a]

Hi @seepops,

Thank you for reaching out.

I just checked your website and there is inline CSS code I found in your main menu Navigation Menu Collapsed that is not available in Navigation Menu Collapsed in your sticky bar.

See the example below, both have the same html structure.

Main Menu

Sticky Menu

If you are the one who added the inline CSS you can add it to Global CSS, just go to X > Theme Options then CSS

Thank you.

[boomfly]

Hi @cramaton, thanks for your response.

Thanks for pointing out the problem. You are right the CSS isn’t loading for that element. Let me explain again… the content inside both Off-Canvas Areas are both pulling from the same Global Block and therefore should be identical. Same content, same styling! But it’s not. There is no custom CSS on either the bars, container, or elements targeting the Global Block. It’s the same Global Block so it’s the same content inside.

[marc_a]

Hi @seepops,

To help you more about your concern, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[ruenel]

Hello cjwakeling,

I am another staff checking in this thread. I have investigated your site and I found out that you have inserted some broken HTML codes. Please keep in mind that any broken codes will affect or create conflicts with other elements on the page or even mess up the whole page. I noticed that you have inserted this broken codes:

<p>Monday – Thursday<br /><span class="times">7am&zwj;–&zwj;11pm</span></p>
<p>Friday<br /><span class="times">7am&zwj;–&zwj;Midnight</span></p>
<p>Saturday<br /><span class="times">8am&zwj;–&zwj;Midnight</span></p>
Sunday<br /><span class="times">8am&zwj;–&zwj;10.30pm</span></p>
<p class="times">Food served all day<br /> Kitchen closes at 10pm Monday&nbsp;–&nbsp;Saturday<br />Kitchen closes at 9pm Sunday

<p>Breakfast Buffet<br /><span class="times">Daily 7&zwj;–&zwj;10am</span></p>
<p>Brunch<br /><span class="times">Monday – Saturday 10&zwj;–&zwj;3pm <br />Sunday 10&zwj;–&zwj;12pm</p>

Kindly double check your page contents including your custom header for any broken codes and test your site again.

[boomfly]

Thanks for pointing that out. I have corrected those mistakes but the problem still persists.
I have looked at the source code and there are some issues around the closing script tags that contains the style for Global Block. See source code at lines 1052 - 1267. Could this be the issue?

[rad]

Hi @seepops,

It’s normal since it’s a javascript template, and the template contains codes/HTML that later can be called or display once the modal or off-canvas is displayed. And in comparing your code, you’ll notice on your screenshots, there are generated CSS

The format is this

<script type="text/cs-toggle-template"> //template container for the global block

<style>/* style of the current global block, including any custom CSS */</style>

//HTML Codes of global block, eg <div> and etc.

<script>//custom javascript of the global block</script>

</script>

But on other javascript templates, there are none, example

That’s the reason why styling is not working, as the other templates don’t have the CSS. Could you try creating another global block with the same menu, then place its shortcode (shortcode must unique just for testing) on another off canvas element?

Thanks!

[boomfly]

Hi @rad,

Ok I’ve duplicated the Global Block and added the Global Block to another Off Canvas menu. You can see this in the main header bar. GB 762 and GB 975 - they are two separate Global Blocks that contain identical elements. As you can see they are styled correctly. It seems to be when you have two instances of the same Global Block on one page that the CSS isn’t loading for the second instance.

The one is the sticky bar is the same Global Block as in the main bar (GB 762) but doesn’t showing styling. Really strange.

[marc_a]

Hi @seepops,

Yes, it seems to be when you have two instances of the same Global Block on one page the CSS isn’t loading for the second instance. It is also applied on your sticky bar, the GB (762) is already declared on the main menu that’s why it is not generating the CSS code on your sticky bar. I recommend to duplicate your GB(762) and put the Global Block shortcode on your sticky bar and it will do the trick. I hope it will help you.

Thank you.

[boomfly]

That’s the manual workaround I’ve used on several websites to overcome this issue. It kind of defeats the object of a Global Block if I can’t use it more than once on a page. I use it all the time to create Off Canvas menus with additional elements and now I have to duplicate it if I want it more than once on a page. Not only having to update more than one Global Block when I need to edit them.
Is this a bug? and will it be fixed?

[christian]

Hey @seepops,

We can label this as a bug simply because the preview is different than the live view. I’ll post this in our issue tracker so this will be queued for fixing.

Right now, if your Global Block content is short, you can disable Dynamic Rendering. If the content is long, you really need to do the manual workaround of duplicating the Global Block.

Thanks.

[boomfly]

Ahh we got there in the end. So basically the site is functioning correctly but it’s not being reflected correctly in the preview. So the preview is wrong.

Just so I understand, I’ve been enabling Dynamic Rendering to solve with the “double tap” issue on iOS devices as described here Problem with Navigation Collapsed element. Which it does but it causes styling issues when more than one instance of the same Global Block appear on the same page.

So like you said, if the Global Block content is short (and doesn’t go off the screen on a mobile device), I can disable Dynamic Rendering and therefore no “double tap” issue. If the content is long and can’t be shortened, then I need to do the manual workaround of duplicating the Global Block to avoid styling issues when enabling Dynamic Rendering.

Thanks for your help.

[christian]

Hey @seepops,

@seepops

So basically the site is functioning correctly but it’s not being reflected correctly in the preview. So the preview is wrong.

Basically, the preview should be the same as the live view.

@seepops

So like you said, if the Global Block content is short (and doesn’t go off the screen on a mobile device), I can disable Dynamic Rendering and therefore no “double tap” issue. If the content is long and can’t be shortened, then I need to do the manual workaround of duplicating the Global Block to avoid styling issues when enabling Dynamic Rendering.

Yes. I’m sorry for the lack of details previously. I was taking into account the double-tap issue actually.

Hope that helps.