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

Troubleshooting Common Menu and Sidebar Issues in the Inspiro Theme

36 threads Sep 7, 2025 Theme → Inspiro

Content

Many users of the Inspiro theme encounter challenges with their website's navigation, particularly with menus and the sidebar on mobile and desktop views. These issues can range from menus not displaying correctly to problems with anchor links and unwanted horizontal scroll bars. Based on community support threads, here are the most common problems and their solutions.

1. Mobile Menu Items Not Displaying or Disappearing

The Problem: Header links or the entire menu may not be visible on mobile devices, or the current menu item might appear invisible (black on black) in the sidebar.

Why It Happens: This is typically a CSS styling issue where the theme's default styles for mobile viewports are either being overridden or are missing necessary declarations for certain elements.

The Solution: Add custom CSS to force the display of these elements and ensure proper color contrast.

@media screen and (max-width: 40em) {
    .header_social {
        display: block;
    }
}

@media screen and (max-width: 64em) {
    .side-nav .navbar-nav>li.current-menu-item>a,
    .side-nav .navbar-nav>li.current-menu-parent>a,
    .side-nav .navbar-nav>li.current_page_item>a {
        color: #fff !important;
        opacity: .5;
    }
}

Add this code in the WordPress Customizer under Appearance → Customize → Additional CSS.

2. Anchor Links Not Working or Sidebar Not Closing on Mobile

The Problem: On one-page sites, clicking an anchor link in the mobile sidebar menu causes the page to scroll correctly in the background, but the sidebar remains open. When closed, the page often jumps back to the top.

Why It Happens: The theme's default JavaScript behavior for the mobile sidebar can sometimes interfere with the smooth functioning of anchor links.

The Solution: This often requires custom JavaScript to manually close the sidebar after a link is clicked. The Inspiro team has acknowledged this is a known issue for a future update. A common jQuery workaround is:

jQuery('#silk-menu a').click(function() { 
    jQuery('.navbar-toggle').click(); 
});

Ensure your anchor link structure is consistent (using #work not ?#work) for all menu items to avoid highlighting issues.

3. Unwanted Horizontal Scroll Bar on Full-Width Layouts

The Problem: When setting a group block to "full width," a horizontal scroll bar appears, revealing a white space or stripe on the side of the page.

Why It Happens: This is usually caused by a page builder or content element that is slightly wider than the viewport, often due to alignment settings or margins.

The Solution: Try adjusting the alignment settings for your groups or sections within your page builder. If the issue persists, inspect the page with your browser's developer tools to identify the specific element causing the overflow.

4. Drop-Down Menu Cut Off or Not Scrollable

The Problem: Large drop-down menus on desktop are cut off, and users cannot scroll to see all the items.

Why It Happens: The menu container has a fixed height with its overflow property set to hidden.

The Solution: The following CSS will make the menu scrollable and set a maximum height.

@media (min-width: 64.0625em) {
    .navbar-nav ul {
        overflow-y: scroll;
        max-height: 80vh;
    }
}

5. Hiding the Hamburger Menu on Desktop

The Problem: Users may want to hide the hamburger icon and sidebar navigation on desktop views entirely.

Why It Happens: The theme displays this icon by default on all screen sizes unless specifically hidden with CSS.

The Solution: Use a media query to target and hide the hamburger button on larger screens.

@media screen and (min-width: 782px){
    .inspiro--with-page-nav .navbar-toggle {
        display: none;
    }
}

General Troubleshooting Tips

  • Clear Caches: After adding new CSS, always clear your browser cache and any caching plugins on your site to see the changes.
  • Check for Conflicts: If CSS solutions don't work, there may be a conflict with other custom code or plugins. Try temporarily disabling other plugins to test.
  • Compare with Demo: Check if the issue also exists on the official Inspiro demo site to determine if it's a bug with the theme or specific to your installation.

For more complex modifications, such as significantly altering the mobile menu structure or adding text like "Menu" next to the hamburger icon, custom theme file edits are required, which are beyond the scope of standard support.

Related Support Threads Support