Override the menu item’s default URL with your custom URL, which can be dynamic through the use of shortcodes

The show more / show less feature allows you to hide items by default beyond a certain item in a submenu. There are several steps to setting this up, so let’s walk through the process with an example. Let’s say we have menu item, Europe, with a submenu that contains 9 countries. However, we’ve decided that showing all 9 at once is more than we want. Instead, we’d like to only show the first 4, with an option to reveal the last 5. 1. Add a custom link item The first thing we’ll do is add a custom link item to our menu to act as our “show more” toggle. The Link Text for this item will be the toggle text. We’ve set it to “Show more” here, but you can set it to whatever you like. We add the “Show more” item to the submenu, just before the first item which should be hidden. Since we want everything after “France” to be hidden by default, we add the “Show more” item after “France” 2. Set up the Show more item’s settings Now click on the “Bellows” button while hovering over the “Show more” item to open the menu item settings. There are two settings, in the General tab, which will be relevant here. First, check the “Show More” setting to turn this item into a show more toggle. Bellows will automatically add a complementary “show less” toggle at the end of the submenu when the items are expanded. If you would like to change the text of this, you can do so in the “Show Less Text” setting. 3. Add an icon, customize the link This step is optional, but differentiating the Show more link can be useful visually. I like to set an angle-down icon on the Show […]

The skin is the set of CSS styles that apply to the menu to give it a particular look, mainly background and font colors. The skin can be set in the Control Panel under the Configuration tab > Basic Configuration > Skin The Pro version includes 20 skins that you can choose from out of the box. You can also change this setting via the Customizer to preview the look before applying it to your site. You can also customize the skins via the Customizer.

Bellows Control Panel > Main Configuration > Basic Configuration > Accordion Folding The Accordion Folding setting determines whether you can open a single or multiple submenus at a time within a single accordion menu. For example, let’s say you open “Action” submenu, then open the “Comedy” submenu on this menu. These would be the results with each option: Single Multiple

Bellows Control Panel > Main Configuration > Basic Configuration > Expand Current Submenu When this setting is enabled, if there is a menu item that points to the current page, the submenu tree for that item will open automatically when the page loads. In other words, with this setting enabled, if you visit the “Comedy” page, or any of its submenu items, you’ll see this when the page loads: Multiple Current Items If you have multiple current items in a menu, you may end up with multiple submenus open by default. If you don’t want that, you can add the class bellows-current-item-priority to the instance of the item that you want to act as the current item to indicate to the plugin that only that branch should be opened by default. For example, if you have an “About Us” item in the menu twice, both will be considered current, so if they are in separate submenus, both submenus will open. By applying this class to one of the “About Us” items, it will be considered the only current item when on the About Us page.

Bellows Control Panel > Main Configuration > Layout & Position Out of the box, Bellows will expand to fill the container you place it in. This is so that you can wrap Bellows inside of a grid column within your theme layout, and it’ll react appropriately within the theme’s responsive layout. If you’re using such a strategy, you don’t need to adjust these settings. However, the following settings allow you to set an alignment other than full width, and an explicit width for the menu, if you so choose. Note that by setting an alignment and width, the layout becomes more brittle. Allowing the menu to remain full width inside a responsive container is the most flexible way to add the menu to your layout, and is the recommended solution. Menu Alignment The menu alignment setting controls the position of the menu within its container. You can align it to the left edge, right edge, full width, or center the menu (by setting a width as well). Note that this is all relative to the theme’s container element. The plugin cannot control the position of the menu relative to anything else on the site, only the element that you place it inside of. Menu Width The menu width parameter should be used if you are using a menu alignment other than full width. This ensures that your menu remains a consistent width when submenus are opened.

Bellows Control Panel > Main Configuration > Images Image Size When you upload an image to WordPress, WordPress automatically generates multiple sizes of that image. WordPress core, themes, plugins, and your own custom code, can all define the sizes that should be generated for each image. When you add an image to the menu, you want to use the smallest image that fits properly, to minimize bandwidth and maximize the load speed of your site for your visitors. While it’s generally best to upload images at exactly the size you want to use them, you can choose which Image Size you want to use for the images in your menu via this setting. By default, the images will be displayed at their full size (original upload size), unless you change this setting.

Bellows Control Panel > Main Configuration > Markup Structure Container Tag The Container Tag setting allows you to control whether the menu uses a nav or div tag as its container. The main purpose for this setting is to avoid residual styling from themes. Some themes write poor, non-modular code, such as this for their menus: This code is bad because it will apply to every navigation menu on the site, not just the theme’s menu. This residual styling can interfere with the accordion menu’s functionality. This is why all themes and plugins should be coded modularly – in this case, that means using classes appropriately. Most themes are coded just fine and this won’t be an issue. But for those that aren’t coded well, this setting allows you to switch to a div to prevent the theme’s styles from applying to the menu in specific instances.

Bellows Control Panel > Main Configuration > Font The Font Family setting allows you to set the font-family for the menu. It is important to note that this does not actually load any font assets. So you should only add font families that you expect your users to have on their devices (standard font stacks) or @font-face fonts that you have already loaded on your site through other means. In other words, this just sets a CSS property, it doesn’t actually deliver the font itself.

This tutorial walks you through adding a new stylesheet (.css) file to your setup. You may wish to do this if you are adding significant amounts of CSS. You can also write a completely custom skin and register that for use with the plugin. Note that this is for users familiar with PHP and CSS, and this guide gets you pointed in the right direction to create your own customizations, outside the scope of what the plugin itself does. If you don’t understand how to set up your custom stylesheet with the instructions below, that’s okay, you can just add your custom CSS in the CSS Tweaks setting instead. Adding a custom stylesheet First, create your new stylesheet (.css file). You might call it bellows-custom.css if it is going to be bellows-specific. Add it to your child theme’s directory, for example, wp-content/themes/{my-child-theme}/css/bellows-custom.css. The PHP below will assume this structure, so if you use a different directory or file name, adapt the $stylesheet_url accordingly. Next, add this PHP (commonly in a child theme’s functions.php): Where do I put this code? The most common place to put custom code is in a child theme. The stylesheet itself could be placed anywhere in the child theme (usually, in a /css directory. The PHP to load the stylesheet would be placed in the child theme’s functions.php. However, you can also create a custom plugin to house your customizations if you prefer. Tip: You might prefer to place your code in the child theme’s style.css. However, there are two good reasons to create a separate stylesheet. (1) Separating your styles keeps things organized and makes it easier to maintain your CSS customizations. (2) Enqueueing a separate stylesheet allows you to declare the main Bellows stylesheet as a dependency (as above), meaning your custom stylesheet will […]