Search Atlas Help Center

🔧 Fix OTTO Pixel Navigation Bar Conflicts in GoHighLevel

Open in
View as Markdown Open in ChatGPT Open in Claude
Camilo Aponte

Camilo Aponte

Last updated on Sep 30, 2026

🧭 Overview

When you install the OTTO Pixel on a GoHighLevel (GHL) site, the mobile navigation bar can disappear or become unresponsive. This happens because the OTTO Pixel script can interfere with GoHighLevel's built-in CSS cascade, z-index stacking, or DOM rendering order. This article explains the verified root causes and gives you exact steps to fix the conflict.

⚠️ Why This Happens

There are three common reasons the navigation bar disappears after adding the OTTO Pixel to a GoHighLevel site:

  • CSS cascade conflict: The OTTO Pixel script loads external stylesheets or inline styles that override GoHighLevel's navigation CSS, causing the nav bar to render hidden or behind other elements.
  • Z-index conflict: GoHighLevel navigation components rely on specific z-index values. If the OTTO Pixel introduces a stacking context at a higher z-index, the nav bar is visually obscured even though it still exists in the DOM.
  • DOM manipulation timing: If the OTTO Pixel script executes before GoHighLevel finishes building the navigation element, it can remove or alter nodes the nav bar depends on, causing it to disappear on mobile viewports where rendering order is stricter.

📍 Where to Place the OTTO Pixel Script in GoHighLevel

Correct placement is the single most important fix. Follow these steps exactly:

  1. Log in to your GoHighLevel account and open the site or funnel where the issue occurs.
  2. Go to Settings → Custom Code (or Site Settings → Header Tracking Code, depending on your GHL version).
  3. Locate the Header code block — this is where the OTTO Pixel must be placed.
  4. Paste the OTTO Pixel script as the last item inside the header code block, after any existing scripts or meta tags. Placing it last prevents it from interfering with GoHighLevel's own script initialization order.
  5. Save and publish your changes.
  6. Test on a mobile device or using your browser's mobile emulation tool to confirm the navigation bar is visible and functional.

Do not place the OTTO Pixel in the body or footer code blocks. Body and footer placement increases the risk of DOM manipulation conflicts because GoHighLevel builds navigation components earlier in the render cycle.

🏷️ Adding the data-cfasync Attribute

The data-cfasync="false" attribute tells Cloudflare's Rocket Loader to skip asynchronous processing of the OTTO Pixel script. Without it, Rocket Loader can delay or reorder script execution, which worsens DOM timing conflicts on GoHighLevel pages.

Add the attribute directly inside the opening script tag of the OTTO Pixel, like this:

  • Find the OTTO Pixel script tag in your GoHighLevel header code block.
  • Change to .
  • If your OTTO Pixel is an inline script (no src attribute), add the attribute the same way: .
  • Save and republish the site.

Important: The data-cfasync="false" attribute must be placed inside the opening script tag itself, not as a separate tag or comment. Placing it anywhere else will have no effect.

🔍 Diagnosing a Z-Index or CSS Conflict

If the navigation bar is still missing after correct script placement and adding the data-cfasync attribute, a z-index or CSS conflict may still be present. Use these steps to investigate:

  1. Open your browser's developer tools (right-click the page and select Inspect).
  2. Use the element selector to click on the area where the navigation bar should appear.
  3. In the Styles panel, look for any CSS rule applying z-index, display: none, visibility: hidden, or opacity: 0 to the navigation element.
  4. Check whether any of those overriding rules originate from a script or stylesheet loaded after GoHighLevel's core styles.
  5. If you find a conflicting rule, note the CSS selector and contact our support team with that information so our team can advise on a targeted fix.

✅ Quick Checklist Before Escalating

  • OTTO Pixel script is placed last inside the GoHighLevel header code block.
  • data-cfasync="false" is added inside the opening script tag.
  • No duplicate OTTO Pixel scripts exist in body or footer code blocks.
  • Site has been saved and published after changes (not just saved).
  • Navigation issue has been tested on an actual mobile device, not just desktop.
  • Browser cache has been cleared before retesting.

🔗 Finding the OTTO Pixel in Search Atlas

To locate your OTTO Pixel code in Search Atlas, go to Left sidebar → OTTO SEO, then open SEO Automation (URL: /seo-automation-v3). From there, open your connected project and navigate to the OTTO settings to find your unique pixel snippet.

💬 Still Need Help?

If you have confirmed all checklist items above and the navigation bar is still not displaying correctly, our team will need to review your specific GoHighLevel HTML structure and script configuration. If you need further assistance, open the chat widget in the bottom-right corner of the platform and type human teammate to be connected with a member of our team.