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

Understanding and Working With Blocksy's Menu Breakpoints

16 threads Sep 16, 2025 Theme → Blocksy

Content

Many users of the Blocksy theme want to control exactly how their website's header and menu behave on different devices. A common request is to change the specific screen widths (breakpoints) at which the desktop menu switches to a tablet or mobile menu, especially to better accommodate devices like the iPad Pro in landscape mode.

This article explains the current behavior of Blocksy's responsive menus and outlines the available solutions and workarounds based on community discussions.

What Are the Default Breakpoints in Blocksy?

By default, the Blocksy theme uses a set of predefined breakpoints to determine when your site's layout should change:

  • Desktop View: Typically displays on screens wider than 999px.
  • Tablet View: Activates for screens between 700px and 999px.
  • Mobile View: Activates for screens narrower than 699px.

This means that on an iPad Pro (1024px) in landscape orientation, the site will usually display the desktop menu. For many users, this is the desired behavior. However, if your desktop menu is long or complex, it might not look ideal on these mid-sized screens, and you might prefer the hamburger-style mobile menu to appear instead.

Why Can't I Change the Breakpoints in the Customizer?

Based on official responses from the Blocksy team, customizable breakpoints are not a feature available in the theme at this time. The development team has indicated that implementing fully customizable breakpoints is a complex challenge. The main reason is that many other plugins and page builders rely on their own set of standard breakpoints. If Blocksy were to change its core breakpoints, it could create conflicts and layout issues with these third-party tools, leading to an inconsistent user experience.

Therefore, this is a technical limitation rather than a simple missing option. The Blocksy team has noted that this is a highly requested feature and is on their research list for future updates, pending broader alignment within the WordPress ecosystem.

Available Solutions and Workarounds

While you cannot natively change the core breakpoints, there are a few approaches you can consider:

1. Use a Mobile Menu on Desktop (Requires Pro)

Some users simply want the hamburger-style mobile menu to appear on all devices, including desktop. This specific functionality—using the 'Mobile Menu' and 'Trigger' elements in the desktop header view—is a feature of Blocksy Pro. The free version of the theme does not include this option.

2. Adjust Breakpoints in Your Page Builder

If you are using a page builder like Elementor, you may have more luck. Some page builders allow you to set their own responsive breakpoints within the editor. Adjusting these settings might help your content reflow at different widths, which could indirectly improve how your menu looks on tablet devices. Check your page builder's documentation for "responsive settings" or "breakpoints."

3. Custom CSS for Specific Devices

For advanced users, Custom CSS can be a powerful tool. You can use CSS media queries to target very specific screen sizes and manually hide the desktop menu while showing the mobile menu trigger. This requires a good understanding of CSS and your theme's HTML structure.

Example CSS Concept (Your specific classes may vary):

@media (max-width: 1024px) and (min-width: 700px) {
    /* Hide the desktop menu on iPad Pro landscape */
    .desktop-menu {
        display: none;
    }
    /* Show the mobile menu trigger */
    .mobile-menu-trigger {
        display: block;
    }
}

Important: This is a generic example. You will need to inspect your site using a browser tool to find the correct CSS classes and IDs used by your Blocksy header setup.

4. Consider a Different Menu Plugin

If having absolute control over breakpoints is critical for your project, you might explore third-party menu plugins available on the WordPress repository. Some dedicated menu plugins offer more granular control over responsive behavior, which you could use alongside the Blocksy theme.

Conclusion

The inability to natively change menu breakpoints in Blocksy is a known limitation. The most straightforward solution for using a mobile menu on all devices is available in the Pro version. For other cases, exploring page builder settings or implementing a custom CSS solution are the primary community-recommended workarounds. Keep an eye on official Blocksy update logs for any future developments regarding this highly-requested feature.

Related Support Threads Support