When adding your menu to your Responsive Layout Maker project, there may be some height and overflow rules that are being overwritten in the CSS. To correct that, you need to add a CSS declaration inside of a custom.css file.
To accomplish this, first you need to apply an ID and a Class to your menu located under the Design > Menu Tab. You can name the Class and ID anything you like as long as it does not start with a number, include special characters or spaces.
Once you have named the Class and ID, export your menu and add it to your exported Responsive Layout Maker project.
As you can see in Figure 2 above, the menu looks and acts perfectly on the higher breakpoints. However, when moving into the lower breakpoints, the menu disappears as seen in Figure 3 below.
The reason your menu disappears is caused by the default settings in Bootstrap 2 that sets the height of your menu to 0. We can easily correct this by giving the menu element a height of auto. This should work correctly in a Coffeegrinder grid.
Where should you add the Code Fix?
We recommend placing the code fix in your custom.css file, if you do not have one, it can be placed in the main.css file.
Open up your custom.css (or main.css) file and add the following code:
/* Menu Builder Code Fix */
#menuBuilder #nav ul.nav-collapse {
height:auto;
overflow:visible; /* Overflow is only needed if you are using a Bootstrap 2 Grid */
}
Once the menu fix has been added to your CSS, refresh your preview, and you should have no issue seeing your menu in all its glory!
Once this is completed upload your project and your menus should function perfectly.
These instructions are only provided as a temporary fix to the problem. We will be releasing an update to Menu Builder that will address this problem. Watch for the email announcement for when it is ready.
