Responsive Select Menu – WordPress Menu Select Box for Mobile Devices

Saturday 25th, March 2017 / 07:46 Written by
Responsive Select Menu – WordPress Menu Select Box for Mobile Devices
591 Flares Twitter 0 Facebook 0 Google+ 6 LinkedIn 0 StumbleUpon 585 Filament.io 591 Flares ×

Responsive Design is the new trend in web design and web development. With the advent of internet capable Smartphone, tablets and other touch enabled mobile devices, it is undeniably a necessity to have a working mobile version of your website. Developers usually create several elements to accommodate a responsive design view, but for the non-internet savvy person, it is an impossible task to do. Nevertheless, it does not mean you would need to hire a developer to do the task. You can try looking for some of the many cool WordPress plugins with responsive capabilities or even themes that have all the responsive bells and whistles built in. Most popular right now is themes based on the popular Bootstrap CSS framework. Check this list of bootstrap themes for more inspiration. This makes it a lot easier to get started making your website responsive and fit will into different screen sizes.

One important website element to get right is the navigation. There are many cool WordPress menu plugins available but I just found a really useful free option called – Responsive Select Menu. It is a lightweight and easy to install plugin that could easily transform your menu navigation into a select menu for smaller screens. This would free up space in your tiny screen, while maintaining a smooth navigation for the user. It also works out of the box without having to type in any PHP code.

How the Plugin Works

Here’s a quick test of how the plugin works on a website. Viewing the website directly without the select menu plugin would result to a messy layout of the menu’s interface.

menu-mobile

Menu viewed on a Smartphone without the plugin activated.

Notice how the menus are arranged and changed accordingly to a drop down select menu when the plugin starts to work.

menu-1

The plugin creates an easy navigate menu and makes navigation on mobile devices user friendly.

working-plugin

Touching the menu on a touch enabled device would drop down a list of all the elements under it.

This plugin did a good job of fixing the disorganized look of the menu items when viewed in a mobile device. It keeps all the elements intact without adding much to the overall look of the website.

Plugin Configuration

This plugin comes with a few number of settings. Here’s some of the most important features included:

  • Control for menu width when responsive plugin starts to work on small screen sizes
  • Limits for number of menu items to be included in the selection
  • Customize menu names/ items
  • Add, disable menu items

plugin-configuration

Responsive plugin menu.

It allows full control of the options within the plugin and easy management interface of the menu items included. This plugin is a worthy add-on to your website for making it mobile ready.

591 Flares Twitter 0 Facebook 0 Google+ 6 LinkedIn 0 StumbleUpon 585 Filament.io 591 Flares ×

About the author

Hi I am Pete! I love to work with web design and sometimes dive into some coding. My main focus is WordPress websites.

View all articles by Pete