BugWP logo BugWP
Back to Community
Home / Community / Theme → Botiga

Fixing Botiga Sticky Header Issues on Mobile and Tablet Devices

27 threads Sep 16, 2025 Theme → Botiga

Content

Many Botiga theme users encounter a common problem: the sticky header works perfectly on desktop but fails to function on mobile phones and tablets. This can be frustrating, as a consistent navigation experience is crucial for all visitors. Based on community discussions and solutions, this guide explains why this happens and provides the most effective fixes.

Why Does the Sticky Header Not Work on Mobile?

The Botiga theme's sticky header functionality is primarily designed for desktop views by default. On smaller screens, the theme switches to a different mobile header structure, which often requires additional CSS to enable sticky behavior. This is not necessarily a bug but a design consideration that requires a small code adjustment.

Common Solutions and Code Snippets

The most reliable fix involves adding custom CSS to your site. Here are the most frequently recommended code snippets from successful resolutions:

Solution 1: Basic Sticky Fix

This is the most common solution that resolves the issue for many users. Add the following code to Appearance > Customize > Additional CSS:

.sticky-header-active .mobile-header {
  position: sticky;
  top: 0;
}

Solution 2: Enhanced Fixed Positioning

If the first solution doesn't work or causes visual glitches, try this more robust code that uses fixed positioning:

@media only screen and (max-width: 1024px) {
  .sticky-header-active .bhfb.bhfb-header.bhfb-mobile {
    position: fixed;
    width: 100%;
    z-index: 100;
    top: 0;
  }
}

Solution 3: For Specific Scroll Behavior

Some users found success with code that specifically targets the scrolling state:

.sticky-header-active.botiga-scrolling-down .bhfb-header.bhfb-mobile {
  position: fixed;
  width: 100%;
  top: 0;  
  z-index: 2;
}

Important Considerations Before Applying Fixes

  • Clear Your Cache: If you use a caching plugin (like WP Super Cache) or a server-side cache, clear it entirely after adding the CSS. A common reason fixes don't appear is that the browser is loading an old, cached version of the site.
  • Plugin Conflicts: Occasionally, another active plugin can cause a script conflict that interferes with the sticky header. If the CSS doesn't work, try temporarily disabling other plugins to test for conflicts.
  • Z-Index Values: The z-index in the code ensures the header appears above other content. If you have elements like a popup or a gallery with a high z-index (e.g., 99), you may need to increase the header's z-index value (e.g., 100) to ensure it stays on top.

Conclusion

Enabling the sticky header on mobile devices in the Botiga theme is typically a straightforward process of adding a small amount of CSS code. Start with the basic solution and progress to the more advanced ones if needed. Always remember to clear your cache after making changes to see the results immediately. For more complex customizations, consulting the theme's documentation or seeking help from a developer familiar with CSS may be beneficial.

Related Support Threads Support