ShiftNav Pro provides two text areas in each menu panel’s settings in which you can insert custom content – before and after the menu. (Appearance > ShiftNav > Main ShiftNav Settings or Appearance > ShiftNav > +{Instance-ID}) Each text area can take text, shortcodes, or full HTML. ShiftNav provides some out of the box shortcodes that you can use to add advanced content to your menu. Advanced Content Types
ViewDocumentation: ShiftNav
Maps 9
Adding a Google Map via a plugin I highly recommend installing WP Google Maps, or a Google Maps plugin of your choice. Google Maps has a lot of capabilities, using a plugin makes it easy to use. You can also generate a map through one of the many online Google Maps generators such as Google Maps Embed API Map-Embed.com Embed Google Maps In any event, once you have your map ready, just add it in the Custom Content setting in the ShiftNav Control Panel. WP Google Maps After installing the plugin go to Maps > Maps to create your map. Then copy the generated shortcode into Appearance > ShiftNav > Main ShiftNav Settings and paste the shortcode into either of the Custom Content areas. Note: there is both a free and Pro version of the WP Google Maps plugin, and both are compatible here.
ViewLogos / Images 2
Top Image To add an image like a logo at the top of your menu, go to the settings tab for your menu panel ( Appearance > ShiftNav > Main ShiftNav Settings or instance tab) 1. Click the Select button next to the “Top Image” setting 2. In the media selection overlay, upload and/or select your image and click the Select button in the lower right. 3. Your image will appear in the settings panel. 4. Click Save to save the settings and your image will appear in the panel. How to make the image shift up on hover (like the demo) If you’d like to make the image shift up on hover like on the ShiftNav demo site, here’s the code that was used to do that: You could drop this in your CSS Tweaks. Note that it targets the main configuration specifically.
ViewPhone Numbers 10
To add a phone number in your custom content, just add a link with the href set to `tel:1234567890`, where the number is replaced by your phone number. The following will produce a phone number link to the number 555-555-5555 with a mobile phone icon next to it. When clicked or tapped on a device with phone capabilities, the link will prompt the user to initiate a call.
ViewUser Mini Profile [Pro] 7
ShiftNav provides a very simple mini user profile shortcode that allows you to insert the current user’s profile image and display name into the custom content area. If the user is not logged in, it will not display. [shiftnav-basic-user-profile] You can wrap the shortcode in the ShiftNav wrapper class to give it some padding User profile shortcode in use with the App skin
ViewContent wrapper classes 4
When adding custom content to the panel, it will expand to the edges by default so that you can have full-width content (like the search bar or a map). If you wish to space your content away from the edges, you can make use of these classes: .shiftnav-content-wrap (25px) .shiftnav-content-wrap-small (10px) .shiftnav-tagline (25px padding, larger font size & line-height) Example:
ViewChoosing a skin 0
Each ShiftNav panel can have its skin set independently. To choose your skin, go to the panel’s settings panel in Appearance > ShiftNav
ViewHow can I make the menu always open on desktops? 8
ShiftNav is an off-canvas menu, and as such it is designed only to display when toggled open by the user. If you would like to force the menu to be open at all times above a certain viewport width, you can add this CSS: You can change 960 in the media query to your desired breakpoint.
ViewUpgrading to ShiftNav Pro 4
ShiftNav Lite and ShiftNav Pro share a common codebase, but are two independent plugins. You will only have one activated at a time. Installing the Upgrade When you purchase ShiftNav Pro, you’ll receive a zip file to download. Download the zip file, then in your WordPress admin, navigate to Plugins > Add New Then click “Upload Plugin” Choose the ShiftNav Pro zip, and click “Install Now” Let the installation complete, and then click “Activate Plugin” If you have ShiftNav Lite installed, ShiftNav Pro will attempt to disable it automatically. Check that the Lite plugin has been disabled Double check that the ShiftNav – Responsive Mobile Menu plugin is disabled and only ShiftNav Pro – Responsive Mobile Menu is enabled. Leaving both active may cause errors. Settings Your settings will automatically be inherited by the ShiftNav Pro plugin. There is no need to do any settings migration when upgrading to ShiftNav Pro Check out the new settings ShiftNav Pro adds new Menu Item Settings, Advanced Content Fields, Secondary Instances, Customizer Settings, and more!
ViewToggle Bar Search [Pro] 10
Since version 1.1 To add a drop-down search box to your main toggle bar, add this shortcode to the Toggle Content Right Edge or Toggle Content Left Edge box under the ShiftNav Settings > Toggle Bar Shortcode Setting Result Searching for a specific post type since v1.5 The search bar is simply a form that submits your search string to the WordPress core search system. The search results are gathered by WordPress, and displayed by your theme. So this shortcode is responsible only for the search form itself, not the results or their display. If you would like to limit the type of posts that will be searched, however, you can do so by setting the post_type attribute in the shortcode. For example, if you only want to search for a custom post type “product”, you could use the shortcode [shiftnav-search-toggle post_type=”product”] This restriction will be submitted with the form, and WordPress will then only return posts that are products.
View