CSS – Fly Out Menu Cut Off

The image below shows a responsive web page where the menu changes from a horizontal menu to a vertical menu depending on the screen size. The horizontal menu worked fine, but the CSS vertical flyout menu wouldn’t work and was cut off by the surrounding CSS div (see image below).

Flyout Menu Cut Off Example
Flyout Menu Cut Off Example

The Solution

The error is potentially caused by the following.

  • The div or surrounding container – Because it’s cutting the menu off.
  • The CSS, z-index or overflow (a CSS issue is a more likely cause).

How do I Find Where the Error is?

You can either find it by trial and error:

  • By searching through your CSS code (or HTML) and changing it to see if it solves the issue.
  • Or by using a web developer tool available in most browsers by pressing F12 (or selecting it in the browser settings), and using the web developer tool to narrow down the cause.

Web development tools can be found in the following browsers, Google Chrome, Internet Explorer, Safari, Firefox and Opera. The diagram below gives a brief description of how to narrow down the cause (of ‘CSS vertical flyout menu cut off’) using the tool. In this illustration, I am using ‘Firefox‘ and ‘Firebug‘ (the links take you to their ‘overview’ pages in Wikipedia, where you can also find their website links).

From the diagram below:

  1. Select the ‘Inspect Element’ tool.
  2. Select the element on the page that is having the issue.
  3. The tool will suggest the HTML code to view and review for errors / familiarisation.
  4. The tool will suggest the CSS code to view and review for errors / familiarisation.
CSS Flyout Menu Cut Off – Code

In my case, the error causing the problem was the CSS statement ‘overflow: hidden;’ which I then changed to ‘overflow: visible;’.

Exit mobile version