Suffusion Collapse Menu Plugin
Another solution for styling the select lists usually triggered by Suffusion on mobile devices. The plugin replace those select lists with alike collapsible menu as you can see now on this site. If you use both navigation bars (Above and Below Header), they are joined in only one collapse menu, that’s it – you cannot have multiple menus with this plugin. (on larger screens, both menus are restored).
I chose this solution for solving also the problem of 2 select lists which are displayed on mobile devices in Navigation Bar Above Header. However, if you have too much menu items, in complicated structures, with many levels of dropdowns, maybe better is to remain on select lists and style them with my other plugin: Suffusion Selectik Menu.
As usual, I tried to find a non-intrusive solution, which not change anything in usual behavior of navigation bars, so you will set these as usual at Suffusion Options -> Skinning and Suffusion Options -> Other Graphical Elements. My plugin goes in action only if you choose to show Select Lists on mobile devices at Suffusion Options -> Layouts -> Responsive Layouts.
This because the plugin wait and look for select list of class “.tinynav”. When this class appear, the plugin replace the select options with simple tags which contain links to your pages. This new list get the class “.nav-collapse” which is rendered by Responsive Nav jQuery plugin created by Viljami Salminen, https://viljamis.com/. This was the obvious solution for me, as Sayontan used for generating the select lists of Suffusion the other solution of Viljami – tinynav.js
So, the plugin just load Responsive Nav files, replacing the regular select lists used by Suffusion on mobile devices. The menu is settled to appear on devices with resolution below 480px, on higher resolutions are used the regular Suffusion Navigation Bars.
== Installation Instructions ==
1. ** Download ** the plugin from WordPress Repository
2. ** Unzip ** the file and load the folder “suffusion-collapse-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. **CAN CHANGE STYLES**
This menu have the advantage that blend with your selected skin. However, you may want to change the color of icon, so you can do this by adding at SUFFUSION OPTIONS -> BACK-END -> CUSTOM INCLUDES -> CUSTOM STYLES (of course, using your color):
|
1 |
.nav-toggle:before {color: #f4421a;} |
/* The menu is displayed now if the resolution of device is below 480px, you can change this resolution adding a media query with your resolution at Custom Styles: */
|
1 2 3 |
@media screen and (min-width: 600px) { a.nav-toggle, ul.tinynavNaN, ul.nav-collapse {display: none !important;} } |
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.
Hi Nicolas, thank you very much for pointing me to this issue.
It was a logical mistake from my part, considering that no one will use ONLY the Navigation Bar Above Header. The new version should work. Please, download it from sidebar or from post and let me know if you have more troubles.
(for more explanations can see this post: http://www.drafie-design.nl/suffusion-collapse-menu-v0-2/)
Dear Drake,
I have installed your plugin, but it seems not to work : when on mobile, the menu just disappears… Any idea where it can come from ?
Thanks in advance
Best regards
Nicolas