Shift8 Full Nav is a plugin that allows you to create a full width, sticky and responsive navigation menu. The plugin allows you to define key design options such as menu color, google fonts for menu options, overlay color (for mobile dropdown) and menu/overlay transparency and mobile menu trigger breakpoints.
This plugin will work with up to 3 levels of dropdown (parent, child, sub-child). It will also display a shopping cart icon and cart count if it detects you have Woocommerce installed. Lastly if you want to have a search dropdown, you can enable search and an icon will display with a search bar dropdown from the top navigation.
Want to see the plugin in action?
You can view two example sites where this plugin is live :
- Customizable mobile breakpoint
This means that you can customize when the mobile version of the menu kicks in. By default it is set to a screen width of 980px
- Mobile mode for all screen sizes
You can set the plugin to mobile mode which means the mobile version of the menu will be always displaying
- Definable font styles everywhere
You can define the fonts from a list of all google fonts, or inherit the fonts defined in your theme. You can also adjust font size and color.
- Upload your logo
Upload your logo and it will display seamlessly
- Change colors and opacity
You can change the color and opacity of the menu bar as well as the mobile flyout
- Dropdown functionality out of the box
If you have parent/child menu items, they will be automatically rendered as dropdown for mobile/desktop view of the menu. You can change color and styling of the dropdown for desktop as well
- Woocommerce compatibility
The shopping cart icon will automatically display if it detects that you have Woocommerce installed and activated. A simple cart icon with a cart count will be displayed
- Search dropdown icon
We now give you the option to display a search dropdown toggle area , right underneath the navigation bar. There are design options that will allow you to configure how this looks such as background color, font size, color, hover colors and whatnot. This is a quick and easy way to integrate search into your navigation.
Remember : Dont forget to set the switch Enable Full Nav after installing and activating!
This section describes how to install the plugin and get it working.
- Upload the plugin files to the
/wp-content/plugins/shif8-full-navdirectory, or install the plugin through the WordPress plugins screen directly.
- Disable any other 3rd party menu plugins you may have installed
- Activate the plugin through the Plugins screen in WordPress
- Navigate to the plugin settings page and define your logo, font and design options. Dont forget to enable the plugin in the settings page!
- The menu should show up by injecting its code into your header
You can check out our wordpress hosting website to see it in action : https://www.stackstar.com
The idea was to make design options available in the administrative interface of the plugin settings. The design options, when chosen, generate inline style markup that applies the styling. There is a stylesheet that imports other common styling elements. You can overwrite anything in your own themes stylesheet.
We plan on implementing a built-in dropdown feature for hierarchical menu options (2nd and 3rd level menu options). Currently this functionality is not built in.
You simply need to add second level (only) options in the WordPress menu section