Troubleshooting Dynamic Menu related issues

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

This article contains suggestions to resolve issues that you may encounter when creating and styling site navigation created with the Dynamic Menus module.

Preventing Flash content from overlapping site navigation in Firefox browsers

If your site contains embedded Flash movies, the site navigation bar may overlap with the Flash media (depending how the elements are laid out on the page). The issue is that Dynamic Menus will appear above (on top of) Flash movies. There's a known issue with the Firefox browser in particular that causes some navigation menus overlap a Flash movie file inserted on the same page. To resolve this issue, choose Website > Web Pages and edit the page with the Flash movie. Copy the following code and paste it inside the object tag used to insert the Flash movie:
<param name="wmode" value="transparent">
And then copy the code below and paste it inside the embed src tag (which is very near the object tag described above):
To learn more about working with Flash, see Inserting Flash content on a web page .

The cursor does not display a hand icon when hovering over a link in a menu

Many visitors are accustomed to seeing their cursor displayed as a pointing hand icon when they hover over linked text or images. If you notice that the cursor is not changing to indicate that it is hovering over a linked menu item, you can use a CSS rule to specify the appearance of the visitors cursor. With a single line of CSS, you can set the cursor to display a hand icon when it is rolled over a link. First, set the linked element to use a CSS class selector. You can use any class name that you'd like, such as cursorHover or cursorFix. Here's an example of a link with the generic class of .className assigned:
<a href="<span>">Visit Google.</a></span>

Then, add the following line of code in the head section of the web page (or in a linked external CSS style sheet).
.className{ cursor: pointer; cursor: hand; }

To learn more, visit the QuirksMode site .

Preventing menu items from jumping when the cursor rolls over them

If you added borders surrounding menu items, there is a known issue that may occur. As the cursor hovers over the menu items, the menu items appear to jump slightly on the screen. The effect is aesthetically unpleasing, although the links still work as expected. This occurs because the width of the up state (normal state) of the navigation button is different from the over state (hover state) of the navigation button. As the cursor rolls over the button, the dimensions of the button appear to change as the linked object detects the cursor hover and displays the over (hover) state. To resolve this issue, you can update the site navigation to ensure that the border applied to menu items is set to the same exact width for both the normal state of menu item and the mouseover (hover) state of the menu item. Once you have set the borders to the same width, you'll no longer see the jumping, jittery effect. For example, if the menu item background color is gray, and you've added a red border appear around the item on the mouseover state (hover state) of the menu item, do the following:
  1. Choose Website > Dynamic Menus. Select the name of the menu you want to edit.
  2. Edit the normal state of the menu item to set the border width to 1, border style to solid and border color to gray.
  3. Edit the mouseover state of the menu item to set the border width to 1, and set the border color to red.
Click Save and publish to republish the page or template that contains the navigation bar. Visit the live site in a browser. Roll your cursor over the menu items to verify that they no longer jump and display as expected. To get an overview of how site navigation works, see Understanding Dynamic Menus .