By default, HighLevel doesn’t allow you to place two buttons side by side in the same column without affecting the entire layout. If you try to align buttons horizontally, it forces all elements—headlines, text, and images—to also align in a single row, breaking your design.
Follow this quick guide to fix it using HigherFrame's custom CSS.
HighLevel’s builder stacks buttons by default. With HigherFrame’s Side Buttons feature, you can quickly align them left, center, or right—no complicated coding required!
/* SIDE BUTTONS - LEFT ALIGNED */
.side-buttons-left .vertical.inner {
display: inline-block !important; /* Ensure proper column behavior */
}
.side-buttons-left .vertical.inner .c-button {
display: inline-block !important;
margin-left: 0 !important; /* Remove margin from first button */
}
.side-buttons-left .vertical.inner .c-button + .c-button {
margin-left: 10px !important; /* Add spacing between buttons */
}
/* SIDE BUTTONS - CENTER ALIGNED */
.side-buttons-center .vertical.inner {
display: block !important; /* Keep default stacked layout */
text-align: center !important; /* Center text & buttons */
}
.side-buttons-center .vertical.inner .c-button {
display: inline-block !important;
margin-left: 0 !important;
}
.side-buttons-center .vertical.inner .c-button + .c-button {
margin-left: 10px !important;
}
/* SIDE BUTTONS - RIGHT ALIGNED */
.side-buttons-right .vertical.inner {
display: block !important;
text-align: right !important; /* Align text & buttons to the right */
}
.side-buttons-right .vertical.inner .c-button {
display: inline-block !important;
margin-left: 0 !important;
}
.side-buttons-right .vertical.inner .c-button + .c-button {
margin-left: 10px !important;
}
/* CENTER COLUMN - VERTICALLY CENTER CONTENT */
.center-column .c-column {
align-self: center !important; /* Vertically centers the column */
flex: 0 1 auto !important; /* Allows for proper width control */
}
let afterClass = match[1];
let targetElement = document.getElementById(afterClass) || document.querySelector("." + afterClass);
if (targetElement && !targetElement.contains(element) && element.previousElementSibling !== targetElement) {
targetElement.insertAdjacentElement("afterend", element);
element.classList.add("moved-already");
console.log(`Moved: ${element} after ${afterClass}`);
}
}
});
}
function removeDuplicates() {
document.querySelectorAll("div.inner").forEach((innerDiv) => {
let seenIds = new Set();
Array.from(innerDiv.children).forEach((child) => {
if (child.id) {
if (seenIds.has(child.id)) {
child.remove();
} else {
seenIds.add(child.id);
}
}
});
});
}
// Initial move and cleanup
moveElements();
setTimeout(removeDuplicates, 50);
// Watch for only relevant updates
const observer = new MutationObserver((mutations) => {
let shouldMove = false;
mutations.forEach((mutation) => {
if ([...mutation.addedNodes].some((node) => node.nodeType === 1 && node.matches('[class*="move-after-"]'))) {
shouldMove = true;
}
});
if (shouldMove) {
moveElements();
setTimeout(removeDuplicates, 50);
}
});
observer.observe(document.body, { childList: true, subtree: true });
});
</script>
🔹 For Left-Aligned Buttons: side-buttons-left
🔹 For Center-Aligned Buttons: side-buttons-center
🔹 For Right-Aligned Buttons: side-buttons-right
Add this class to the column along with your alignment class: center-column
Make sure that the side-buttons class is applied to the parent column, not the individual buttons. The class must be set on the column containing the buttons for the CSS to take effect.
Apply the "center-column" class to the parent row' This ensures that the entire button column remains centered vertically within the row.
Yes! The CSS supports multiple buttons. Just add more buttons inside the side-buttons column, and they will align properly with equal spacing.