If you want to add a significant amount of custom CSS, the best method is to use a custom stylesheet. You can always add the CSS to your child theme’s style.css, but if you want to keep your ShiftNav styles separate, you can use the ShiftNav custom.css 1. Activate the custom stylesheet In the ShiftNav Control Panel, change your Skin setting to Custom (custom.css) This will load the custom/custom.css file after the ShiftNav core files, but before the Custom Tweaks from the settings. 2.Create the custom stylesheet In the plugins/shiftnav-pro/custom directory, create a custom.css file (you can rename custom-sample.css). 3. Adding skin and supplementary styles It’s easiest to begin by using the contents of the custom-sample.css skin and changing or adding styles as you like. 4. Using LESS If you are familiar with LESS, you can use the custom-pro-sample.less file to generate your custom skin. Have fun customizing!

ShiftNav inherits the font from your theme, so the simplest way to set ShiftNav’s font is just to set a font on the body You can also target ShiftNav specifically However, sometimes a theme or another plugin will add styles that affect the menu (for example, for .menu-item), so you may need to add more specific selectors to override the font in those cases.

The icons – including submenu indicator arrows – in ShiftNav are font icons. Some browsers – most commonly Firefox – enforce a Cross-origin resource sharing (CORS) restriction policy for fonts. As a result, if you serve the Font Awesome font assets from a different domain, Firefox (and depending on your server configuration, other browsers as well), will not load the fonts due to this policy, so the icons are not displayed. CDN (Content Delivery Network) The most common occurrence is using a CDN. For example, if your site is mysite.com, but your stylesheets are served from cdn.mydomain.com, or cdn.someothersite.com, the browser will not load the fonts because they are served from a different domain (their “origins” are different). The Solution There are two options to resolve the issue: either serve your fonts from the same domain as your site, or configure the fonts on your secondary domain to be served with the appropriate headers to allow cross-origin resource sharing. Serve the files from the same domain This generally means that you would exclude the Font Awesome files from your CDN, and link the files on your main server instead. The font file itself is the important resource, but generally this would come down to excluding the Font Awesome stylesheet. If you’re using ShiftNav copy, it is found at /wp-content/plugins/shiftnav-pro/assets/css/fontawesome/css/font-awesome.min.css or /wp-content/plugins/shiftnav-responsive-mobile-menu/assets/css/fontawesome/css/font-awesome.min.css This solution will work, but you won’t be able to take advantage of your CDN for these files. Set the font headers to allow cross-origin resource sharing This means that you would configure your server to tell the browser that it’s okay to load these resources from a different domain. What you’ll need to do is set the Access-Control-Allow-Origin header to * for the fonts. If your server is running apache, this generally just means dropping an .htaccess file […]

Avada will interfere with ShiftNav’s back button functionality when using “shift” submenus. Avada takes the “back” button and tries to follow the link via javascript. However, it doesn’t check for an href, and therefore it causes a 404. Here’s the problematic code in avada/wp-content/themes/Avada/assets/js/main.js The problem is that this code, using the selector .sub-menu li, is too generic, and will apply to all standard WordPress menus, not just Avada menus. And the theme should only be applying javascript to its own markup. Moreover, it is not doing an existence check for an href value (which is not required in HTML5), so when that doesn’t exist, it tries to redirect to “undefined” Possible Solution with ShiftNav 1.4+ In ShiftNav 1.4+, you can try to avoid this script from Avada by changing the Back Button Tag to a span in the ShiftNav Control Panel > General Settings This has worked for some users – it may depend on the Avada configuration. Manual solution The solution should be as simple as changing this line to target only Avada menus. Something like this should work (just adding the ‘.fusion-menu’ so it doesn’t affect non-Avada menus) Note that if you are using the minified version of the script, the change will need to be made in that file instead.

You can set various ShiftNav styles via the WordPress Customizer interface via Appearance > Customize. Here’s a quick video overview of some of the settings: