ShiftNav provides a search bar shortcode which you can insert into the Custom Content areas before or after the menu in your ShiftNav menu settings. [shiftnav-search] You can also set the placeholder text with the placeholder attribute [shiftnav-search placeholder=”Enter to search”] By default it is set to “Search…” Search shortcode in the menu panel 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 post_type=”product”] This restriction will be submitted with the form, and WordPress will then only return posts that are products.
ViewAdvanced Content
Advanced Content [Pro] 5
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
ViewMaps 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:
View