Back to Community
Home / Community / Theme → Zakra

How to Fix the Zakra Theme Mobile Menu Scroll Bar Issue

15 threads Sep 9, 2025 Theme → Zakra

Content

Many users of the Zakra theme have encountered a specific visual bug on their mobile and tablet sites: an unnecessary scroll bar appears inside the mobile menu when expanding submenus. This guide will explain why this happens and provide a straightforward CSS fix to clean up your mobile navigation.

The Problem: Unwanted Mobile Menu Scroll Bar

When you click the hamburger menu on a tablet or mobile device and then tap a plus (+) icon to expand a submenu (e.g., for items like 'About' or 'Learn'), a vertical scroll bar appears alongside the list of sub-items. This scroll bar is often unnecessary because the submenu isn't long enough to require scrolling, and it disrupts the clean design of the navigation.

Why This Happens

This behavior is controlled by the Zakra theme's CSS. The theme applies a set of styles to expanded submenus that includes a fixed maximum height and enables scrolling, regardless of whether it's needed. The specific CSS code that causes this is:

.tg-mobile-navigation li.page_item_has_children.submenu--show > ul,
.tg-mobile-navigation li.menu-item-has-children.submenu--show > ul {
    max-height: 500px;
    visibility: visible;
    overflow-y: scroll; /* This property forces the scroll bar */
}

The overflow-y: scroll; rule instructs the browser to always display a scroll bar for that element, even if the content does not overflow its container.

How to Fix It

The most effective solution is to override this CSS rule by adding a small snippet of code to your site's Additional CSS section. This will change the behavior to only show a scroll bar if the submenu content is actually long enough to require it.

  1. In your WordPress dashboard, navigate to Appearance > Customize.
  2. Click on the Additional CSS tab.
  3. Copy and paste the following CSS code into the provided text area: 
    .tg-mobile-navigation li.page_item_has_children.submenu--show > ul,
.tg-mobile-navigation li.menu-item-has-children.submenu--show > ul {
    overflow-y: auto;
}
  4. Click Publish to save your changes.

What this fix does: Changing overflow-y: scroll; to overflow-y: auto; tells the browser to intelligently display a scroll bar only when the content inside the submenu exceeds the available space. If the submenu is short, no scroll bar will appear.

Alternative: Remove Scroll Bar Completely

If you are certain your submenus will never be long enough to need scrolling, you can hide the scroll bar entirely. To do this, use the following code in the Additional CSS section instead:

.tg-mobile-navigation li.page_item_has_children.submenu--show > ul,
.tg-mobile-navigation li.menu-item-has-children.submenu--show > ul {
    overflow-y: hidden;
}

Note of caution: Use the hidden value carefully. If a submenu has more items than can fit on the screen, they will be cut off and inaccessible to users.

Troubleshooting Tips

  • Clear your cache: After making CSS changes, always clear any caching plugins you have installed and your browser cache to see the changes take effect immediately.
  • Check on mobile: Use your browser's developer tools to simulate a mobile device or physically check your site on a phone/tablet to confirm the fix is working.

This simple CSS adjustment should resolve the unwanted scroll bar issue and provide a smoother experience for your mobile visitors.

Related Support Threads Support