Position the 'Manage Content' and 'Edit Menu' Buttons in the Experience Manager

Overview

This page describes how to control the placement of the Manage content and Edit menu buttons in Bloomreach Content. Position these buttons near the relevant content or menu to improve usability in the Experience Manager interface.

When to Use

Adjust the button position when you want users to clearly associate the 'Manage content' or 'Edit menu' button with a specific document or menu in the channel preview or editor.

Button Positioning Behavior

Both 'Manage content' and 'Edit menu' buttons are rendered as <a> elements with the hst-fab class. These buttons use CSS absolute positioning with top: 0 and right: 0 by default. The button appears in the top-right corner of the nearest ancestor element that has a CSS position property set (such as relative, absolute, or fixed).

Implementation Steps

1. Wrap the Button in a Positioned Element

   To control where the button appears, set position: relative on the element that contains the Freemarker tag for the button. This ensures the button is positioned relative to that element.

2. Adjust Button Offset (Optional)

   If needed, override the top and right properties for .hst-fab to fine-tune the button's placement.

Example: Positioning the 'Manage Content' Button

Freemarker Markup

<div class="title">
  <@hst.manageContent hippobean=document />
  ${document.title?html}
</div>
copy

CSS

.title {
  position: relative;
}
.title a.hst-fab {
  top: 10px;
  right: 10px;
}
copy

In this example, the 'Manage content' button appears 10 pixels from the top-right corner of the .title div. Apply the same approach to position 'Edit menu' buttons.

Known Limitation

The Experience Manager displays these buttons using an overlay on top of the site page. The buttons are not part of the site's DOM, so they do not affect the site's layout. However, this approach has a limitation: if the underlying content moves (for example, inside a scrollable area or a carousel manipulated by JavaScript), the button overlay does not move with the content. In these cases, the button may become misaligned with the intended element.