Repeated Header in a next.js page using iframe and bbpress

I am new to the tech stack of this issue. I am new to Next.JS and I am new to BBPress. But this is the tech stack of my “WEC MFG” website, https://excellencematter.net. My page.tsx for the interaction menu option has the which contains the bbpress functionality.

Now, here is the bug. After a new user account is registered and the new user logs in, the web page is a mess. It looks as if the iframe nests an entire website so that it produces a look where the whole webpage has two navigation bars. I hope I am describing this accurately. Please view the screen shot.

I have done some work with adding “snippets”, custom pages and “Additional CSS”. But so far the problem has been resistant to my efforts. I need help. I will provide the code you need to detect this bug and solve this problem. Please help.


UPDATE:

There must be a usable and intelligent solution. But I have also stumbled upon a temporary hack that will provide the immediate fix I need.

And here it is. If a refresh is sent to the browser, the double navigation bar disappears. So I need to find a way to do that programmatically. Please help. It goes without saying that I need to do this without falling into the logic of an infinite loop.

Hi, I think the problem is probably not the navigation bar itself, but that after authentication the iframe is rendering a full WordPress page (including its own header/navigation) inside the existing Next.js layout. This would explain why the issue appears after login, and also why a browser refresh fixes it.

A forced refresh may suffice as a temporary workaround, but I suspect the real fix is understanding why the authenticated bbPress response differs from the anonymous one. Then you can take steps towards preventing the nested full-layout render from happening in the first place.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.