[Bug fix] Canvas Base Template v3.6.0 and v3.6.1 - Header and footer not visible in some browsers

Hi all,

First of all, we’d like to thank the Canvas community for flagging this issue to us. This helps us improve our product and ensure that everything in the template is functioning as intended. We apologize for any inconvenience this may have caused you.

What is the bug?
In some browsers, the header and footer elements are not visible. We’ve done some thorough investigation and found out that this behavior occurs when the user has an ad blocker or privacy protection tool enabled.

Is my app affected?
This bug has been fixed in v3.6.2 of the template. For apps that are still on 3.6.0 and 3.6.1, you would need to follow the instructions below to manually fix this issue. Unfortunately, we are unable to retroactively apply this fix to your app for you.

Do I have to apply the fix to my app?
The short answer is yes. Keep in mind that any user who visits your site and has an ad blocker enabled will not be able to see you app header and footer.

How can I fix this in my app?
If you’re a Bubble beginner, please watch this short video that covers the basics of copying and pasting workflows in Bubble from one app to another app. Otherwise, skip ahead and following the instructions below:

Have two tabs ready in your browser:

  1. Your v3.6.0/v3.6.1 Bubble app
  2. Canvas Base Template v.3.6.2 read-only app

Step 1
In your own app, go to the “header” reusable and from the element dropdown, select the “Header HTML” element.

Next, right click on the Header HTML’s data source field (making sure nothing is highlighted or selected), right click, and select Clear all.

Go to the v3.6.2 read-only app, and locate the same Header HTML in the “header” reusable. Next, right click on v3.6.2 app’s Header HTML’s data source field (making sure nothing is highlighted or selected when doing so), right click, and select Copy.

Go back to your own app, right click on your Header HTML’s empty data source field and select Paste.

Similarly, replace the “header” reusable’s “Header CSS” in your app with the new Header CSS expressions in the read-only app.

Step 2

Replace the “:gear:system_footer”'s “Footer HTML” in your app with the new Footer HTML expressions in the read-only app (Note: both the default and the conditional expressions).

Step 3

In the “:gear: system_admin_navigationitem_menu” element in your app, replace the “HTML Button Preview” with the new HTML Button Preview expressions in the read-only app.

Step 4

In the “:gear: system_admin_header/footer_settings” element in your app, replace the “HTML Button Preview” with the new HTML Button Preview expressions in the read-only app.

Step 5

In the “:gear: Navigation button style” option set in your app, click into each option (modify attributes) and replace “ad-” with “canvas-” for the “HTML Class” attribute values

Thank you again for your time and please let us know if you have any questions.

Canvas team

1 Like