Skip to main content




Applies only to Traditional Web Apps
Service Studio version:

Layout Top Menu Reference

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Layout and classes

    Responsive behavior

    This layout comes with a default responsive behavior. On tablets it remains the same as on desktop. But on phones it breaks the content vertically, making the placeholders Title and Actions full-width.

    The menu also adapts to mobile, moving the navigation to a sidebar, toggled by a hamburger icon.

    On a mobile phone and tablet:


    Here are some more advanced use-cases of the widget.

    Customize your responsive breakpoints

    1. Go to the Common Flow.
    2. Double-click on your Layout to open the widget tree.
    3. Go to the LayoutTopMenu parameters.
    4. Toggle the DeviceConfiguration 'plus icon'.
    5. Set your custom breakpoints (in pixels). On the example below the phone breaks is set to happen only when the Device with is at 200px.
    6. Publish and test.

    Customize your content max-width

    1. Go to Themes.
    2. In the Grid section, set your custom width (default value is 1280px) in the Max. Width parameter.
    3. Publish and test.

    Device compatibility

    In Internet Explorer we made specific CSS that uses 'position: fixed' instead of 'position: sticky', as 'sticky' is not supported in Internet Explorer.


    In Internet Explorer 10 and 11, we added some specific behaviors to account for the flicker caused by the slow loading time of polyfill CSS Variables. If there are any JavaScript errors, this will cause the screen to appear white.

    To override this behavior, add the following code snippet to your CSS theme:

    .ie10, .ie11 {
        display: block;
    • Was this article helpful?