Header doesn't work on a Bubble index

Hello !

I’m a new user of Bubble and Canvas.

The marketing page available in the free license doesn’t suit my needs for the landing page (index), so I made my own index page with bubble using Blocks.

As explained in the topic and this one, I’ve set my Bubble page as new index page, copied the workflows, “Popup hidden variables” and “cookies permission” of the old index to my new index page.

The header is displayed in my new index, but the links and buttons are not working, they’re not clickable.

When I scroll down the new index page, I get the header on top (sticky) but there’s nothing inside, it’s just a white rectangle.

After further investigations, looks like it’s a specific workflow that makes the items in header not clickable:

When looking to the web console I get the message:
loading html header in JS action - this should not happen when the app is using a paid or Agency plan, if the page's HTML header has not been modified in this app., which is the message of console.log in the “Run javascript” step.

This is the complete JavaScript code that is run in the first step of the workflow:

if (document.bubblePageHTMLavailable === undefined) {
// only run this when the Page's HTML Header can't be loaded

console.log("loading html header in JS action - this should not happen when the app is using a paid or Agency plan, if the page's HTML header has not been modified in this app.");

var headerPageHTML = `var - page's ⚙️  Marketing page's Header html:find & replace:find & replace:find & replace`;

headerPageHTML = headerPageHTML.replace(/\$brokenCSSIssue\$/g, "\\8").replace(/\$brokenCSSIssue2\$/g, "\\9");

document.head.innerHTML = document.head.innerHTML + headerPageHTML;

For my understanding, since it doesn’t find the HTML Header, it replaces it with a Header from the Marketing Pages. But why is this triggered ? The Header is on my page, so it should enter in the if statement.

Btw, I tried disabling this workflow, the header works fine but when I scroll down the header disappears.

Any ideas ?

Hi @dev.hara!

Could you share:

  1. Which version of Canvas are you working with? You’ll find it in the ‘Website’ data type (or in the ‘:gear: App settings’ depending on your Canvas version) record in your database, look for the Template version field.
  2. Screenshots of your page Elements tree where we can see how is the header structured?

Thanks, without that information (and maybe more) it’ll be impossible for us to help you debug your problem!

Hi @jmalmeida !

Thanks for your reply :slight_smile:

  1. Template version is: 4.1.5
  2. Screenshot of my page Elements tree:

And this is the screenshot of my header reusable element:

Hope this helps !

Hi, @dev.hara, and thanks for flagging this and for all the info,

Let’s try this:

  1. Create a Safe point.
  2. Delete the ‘Run javascript’ that you pointed out.

The header should be working now, but it dissappears when scrolling down. This may be caused by a condition that it’s triggered when the Current page scrolling position > 0, likely in the Floating Group Header Bg.


  1. Delete the ‘FloatingGroup Header Bg’ and the ‘FloatingGroup Header’ from your page
  2. Copy the ‘FloatingGroup Header Bg’ from your index page (it contains the header too) and paste it in your page. → to do this:
    4.1 go to the index page and click in the ‘FloatingGroup Header Bg’ in the Elements tree, when its name turns to blue, clik on Edit and ‘Copy with workflows’
    4.2 then in your page go to the Edit dropdown and click on ‘Paste with workflows’

I hope this helps, let me know if you need anything else, thanks!

PS: Could you tell me how did you created this page? That ‘Run javascript’ was deprecated some versions ago, since Canvas moved from the html header to the new one build with Bubble elements in the new responsive engine. So it doesn’t belong on your template v.4.1.5 which is the last version. Thanks in advance, this will help us debug this problem and prevent it’ll happen again!

1 Like