Installation & Setup

Knowledgebase Docs » ShiftNav » Installation & Setup

Quick Setup 22

This guide gets you up and running as quickly as possibly with minimal configuration. Check out the Configuration section of the guide for full options 1. Download the ShiftNav zip. Upload it to your WordPress installation. 2. Activate the ShiftNav plugin 3. Go to Appearance > Menus and create your menu to be used in ShiftNav. To set ShiftNav-specific settings, hover over the menu item and click the Shift button that appears. 4. Go to Appearance > Menus > Manage Locations and assign your menu to the ShiftNav [Main] Location 5. Go to Appearance > ShiftNav. Click the “Toggle Bar” tab. 6. Set your Toggle Breakpoint (959 is a good starting point) 7. Provide the selector for the menu you want to hide. This is specific to your theme, and often looks like .primary-nav, #primary-menu, .top-nav, .main_menu, etc. For UberMenu 2, the selector is #megaMenu. For UberMenu 3, just check the special Hide UberMenu box. 8. Click Save Changes 9. ShiftNav is now installed and running on your site. You can configure it further in the Appearance > ShiftNav Panel.


Installing Updates [Pro] 0

When updating, all settings in the ShiftNav Control Panel and menu item options will be preserved. Changes you have made directly in the plugin files on the server will be overwritten. Via FTP 1. Download the latest version of ShiftNav Pro from your Purchase History page Please note you will need a current, valid license in order to download. 2. Open up your FTP Client and connect to your server 3. Navigate to the wp-content/plugins/ directory in your WordPress installation 4. If you have made any customizations, back up the shiftnav-pro/custom directory before proceeding. 5. On your desktop, unzip the ShiftNav Pro plugin file. You should have a folder shiftnav-pro/ 6. FTP the shiftnav-pro/ folder into your server’s wp-content/plugins directory to overwrite the old files 7. If your custom.css has been overwritten, re-upload your backup copy. Via the WordPress Admin To update the plugin via the WordPress admin, you’ll need to first install the Easy Theme and Plugin Upgrades plugin from the WordPress repository. Please note if you have made any edits to the plugin files, they will be lost. Be sure to back up your /custom directory before updating if you have made any changes there. 1. You should always make a backup of your site before installing updates this way. Depending on your server configuration, this method can cause issues and you’ll want to be able to revert to a backup easily. 2. Download the latest version of ShiftNav Pro from your Purchase History page 3. In your WordPress Admin Panel, go to Plugins > Add New, and click “Upload” 4. Click “Choose File” and select the ShiftNav Pro zip file you downloaded. 5. Select “Yes” from the “Upgrade existing plugin?” option. 6. Click “Install Now”


Optimize your viewport meta tag 4

Overview Make sure your site is using this viewport meta tag in your site <head> Almost all themes will already have an optimized viewport meta tag, so 99% of users don’t need to change anything. Recommendations It is highly recommended that you use the standard, optimized viewport meta tag recommended for responsive sites by Google and Mozilla. Just having the viewport meta tag is not enough; it needs the width and initial-scale parameters set as above. These are not ShiftNav-specific requirements, but standard recommendations for all responsive, accessible web sites. The optimized viewport meta tag provided above is the one recommended by web standards authorities Google and Mozilla. For reference: Google recommendations Mozilla recommendations What is the viewport meta tag? The viewport meta tag is a critical component to make your site responsive. It signals to the browser that your site should be responsive, and reflow the content to the device’s dimensions, rather than simply scaling the content down. Google has a concise and accessible explanation of why this is the optimized viewport meta tag, which I have copied here for reference: Read the whole article here: Google Web Fundamentals: Responsive Web Design Basics What happens if I don’t have this viewport meta tag? If you have no viewport meta tag at all, your site won’t be responsive. Since ShiftNav only displays below a given breakpoint, if your site is not responsive, a mobile device will show the desktop site, and ShiftNav will never display. If you have a different viewport meta tag, you may experience resizing issues as ShiftNav opens and closes. Including the proper viewport meta tag ensures the browser knows how to properly handle displaying your site on mobile devices when there is off-canvas content such as ShiftNav.