Advanced Content

Knowledgebase Docs » ShiftNav » Advanced Content

Search 7

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.

View

Advanced Content [Pro] 1

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

View

Maps 3

Adding a Google Map via a plugin I highly recommend installing WP Google Maps or Comprehensive Google Map Plugin, 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. Comprehensive Google Maps After installing the plugin: 1. Go to your WordPress Admin Panel > Google Map > Shortcode Builder This is where the plugin allows you to build your Google Maps shortcode through a nice UI, and configure all sorts of settings. 2. In the Shortcode Builder, I recommend setting up at least the following (though you can configure all the settings if you like): Title Mobile Map Width 100% Map Draggable Disable Location {Your location} Title The title can be anything you like, but must be unique for each map. Name it something you’ll recognize. Width Setting the width to 100% allows the map to fully expand in the ShiftNav panel. Map Draggable By disabling the map draggability, users on a touch screen will be able to continue scrolling up and down on the menu without the map’s dragging interfering with the menu function. This is optional of course, but generally better for usability. Location The location is, of course, critical. Without this the map won’t work. Type in […]

View

Logos / 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.

View

Phone Numbers 2

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.

View

User Mini Profile 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

View

Content wrapper classes 1

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