Suffusion Selectik Menu Plugin
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;} } |
Ciprian
Experienced web developer and graphic designer. Former consultant for Suffusion theme and former moderator on Suffusion Support forum. I teach others while learning myself.
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Can you let the plugin active? It is possible to have this behavior, as it applied to the class “.tinynav”. If you remember you had previously the same problem with the default select lists, but I give you the code to hide one menu. Now is the same, one select list is hided by CSS, but it still exist in the source, with the same class “.tinynav” so, the jQuery functions are applied even for that element. But now is all about CSS, these new lists can be formatted and positioned as is needed.
This plugin seems to have a problem if you have both navigation bars enabled, it displays the below bar above the top bar and also doesn’t for me show all the top bar options.