Recently I was asked how to have a Select Dropdown Menu on a page where a 3rd party form block the regular behavior of Suffusion Menus on mobile devices. You know, if you choose the responsive layout for Suffusion, on small screens the navigation bars are changed to Select Dropdown’s.
But, my friend use a third party form on a specific page, and the javascript for that form prevents the Select Menu to appear on mobile devices. The navigation bar is hided, but nothing appear instead, so that page don’t have a menu on small screens. Those situations can appear and you cannot renounce to the forms because can be important for your site. Worse, you even cannot correct the javascript of those forms because usually the javascript is located on the 3rd party servers.
Fortunately in Suffusion we can add manually a Select Dropdown Menu only on these specific pages. In Suffusion we have the Left Header Widget, a tiny widget area located on the left side of navigation bar. We will use this area to manually add a Select Dropdown with our menu.
Step.1. We will add a text widget, without any title, to the Left Header Widget area. Our widget will contain the HTML code for the select dropdown like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
It is the code for usual Suffusion Select Menu (remember, the menu don’t works only on specific pages, for the rest of pages the dropdown is triggered) where I changed the “tinynav” class with my class “menu-mobile” (for avoiding conflicts with the elements used by 3rd party form/plugin). Also I added the “onChange” event to make my Dropdown to act like a menu without the support of Suffusion javascript (blocked by the form).
Step.2. With the help of a plugin like Widget Logic (Dynamic Widgets or Widget Context are easier to use) restrict the display of widget only to the desired page. We don’t need to see 2 dropdown lists on pages where menus acts normally.
Step.3. With a simple media query restrict the display of widget on desktop screens. At Suffusion Options -> Back-end -> Custom Includes -> Custom Styles add:
|
1 |
@media screen and (min-width: 480px) {#left-header-widgets {display:none;}} |
The code will assure that we don’t see the select menu on screens with resolution greater than 480px – you can change the value as needed.
Additional information’s related to Select Dropdown Menu
Sometimes the select menu appears even if we don’t need it – i.e. at higher resolutions, or even if we don’t have Responsive Layout active. (For an user of Suffusion forum the Select Menu come when he activated WP-Touch, but even after deactivation the menu don’t dissapear). In such cases can try following steps for hiding again the menu:
A. Make sure that you use the latest stylesheet of theme. Some developers make their customizations directly in style.css of theme at the current version. Or, even if they use a child theme, they copy ALL styles from theme in their style.css from child folder. In case of upgrades they use to copy the customized style.css over the actual file. This is wrong – the new styles from theme can’t have effect because are removed by the old rules. Instead is better to add all your changes at Suffusion Options -> Custom Includes -> Custom Styles.
B. Follow the usual debugging procedure of WordPress – deactivate ALL plugins and check if the problem is solved. If so, then reactivate them one-by-one and verify which of them break the things again. Change the wrong plugin with another which don’t conflict with the theme.
C. If the plugin is essential for the site can also use the Custom Styles section for hide the menu. If you don’t need at all the select menu, i.e. you don’t need a responsive layout, add at Custom Styles:
|
1 |
select.tinynav {display:none;} |
If the responsive layout is a must, but you see the select menu at high resolutions, can use a media query at Custom Styles:
|
1 |
@media screen and (min-width: 480px) {select.tinynav {display:none;}} |
If the codes from above don’t seems to works, add !important directive for them.
