Marketplace
Important! This documentation is old, and a lot has changed in HubSpot since we released Act version 1. If you are still using Act version 1 we recommend saving these pages for later reference. This documentation will be deleted soon.

Main Navigation's flyouts going off screen

If some of your menu flyouts are going off screen (viewport), you can reverse their direction by adding one of the following classes to the Main Navigation module:

Act Theme - Menu Flyouts Left

For all flyouts:

flyouts-flow-left-all

Only the last item:

flyouts-flow-left-last

Only the last two items:

flyouts-flow-left-last-two

Only the last three items:

flyouts-flow-left-last-three

Here are the step-by-step instructions on how to apply one of these classes:

1 Open your Act Header global group in Design Manager:

How to access Act Header in Act Theme for HubSpot

2 Click the gear icon on your Main Navigation module, then Edit CSS:

Edit Main Navigation's CSS in Act Theme for HubSpot

3 Add one of the classes described above:

Edit Main Navigation's CSS in Act Theme for HubSpot and add Flyouts Left class

4 Don't forget to hit Done and Publish your changes.

Notes:

  • These classes work only with the Main Navigation module. Please don't use them on other menus.
  • Only one of these classes should be applied at a time in the Main Navigation.