How to Fix Unclickable Mobile Menu

Some BoldGrid Inspirations, like Pavillion and Uptempo, have specific stylesheet configurations to control the spacing of elements when the Call to Action widget is present.  Removing the Call to Action widget in these themes can have some unintended side effects, one being the usability of your mobile menu.

Sometimes you will find that the mobile menu button in these themes becomes unclickable and this is caused by some page elements unexpectedly overlapping and preventing users from opening the menu.

When situations like this occur we can use CSS to fix the problems with the menu button by adding a z-index that tells browsers to position it above the other page elements and make it usable again.

The following example code targets the menu toggle button used for mobile devices and applies a z-index to it.  If you have made other customizations on your website that involve z-indexes then you might need to increase the associated value to ensure the toggle button sits on top of the other page content.

.palette-primary .navbar .navbar-toggle {
    z-index: 10;
}

You can add other CSS rules within that selector to further customize your menu button, such as background colors or padding, in addition to changing the z-index.