Often, last days, Suffusion users expressed frustration about the look of navigation menus on mobile devices. On small screens the navigation bars of Suffusion are transformed in small, unstyled select lists.
Even if is possible to use another kind of menus (like collapsible ones), for making these to work are necessary to use some widget areas, not the navigation bars. So, because those select dropdowns are already generated and they replace the regular navigation bars on mobile devices I tried to find a solution to style them.
And I found the Selectik jQuery plugin created by Ivan Kubrakov which make easy to style our existing select dropdowns. Now, even if is not so hard to add Selectik in Suffusion like any other jQuery Plugin as I wrote often on this site, this time I tried another approach. Because I don’t have more places for linking the Javascripts at Suffusion Options -> Back-end -> Custom Includes, I wrote a WordPress plugin which contain only one php file, which just register and enqueue the scripts and styles of Selectik. It is up to you to style more the list at Suffusion Options -> Backend -> Custom Includes -> Custom Styles. If you want to see the code, it is heavily commented in the file.
== Installation Instructions ==
1. **Download the plugin** from WordPress Repository
2. **Unzip** and load the folder “suffusion-selectik-menu” in to the “/wp-content/plugins/” directory (or install the zip from WordPress dashboard).
2. **Activate the Plugin** from plugin menu in the WordPress dashboard
3. **ADD YOUR OWN STYLES** at SUFFUSION OPTIONS -> BACK-END -> CUSTOM INCLUDES -> CUSTOM STYLES. Mine are as follows:
|
1 2 3 4 5 6 7 8 |
.custom-select {width:210px;clear:both;float:none;margin:0 auto;} .custom-select .custom-text, .custom-select.disabled span.custom-text:hover {height:28px !important;} .custom-select ul, .custom-select li {clear:both;} .custom-select.open-list .custom-scroll {top:40px !important;} /* The next media query is really important, as it hide the menu on desktops screens */ @media screen and (min-width: 480px) { .custom-select {display:none;} } |
