Hi, so in a template I have a dnd_section and inside it there is two dnd_column -
the left one with width=9, offset=0 and the right one with
width=3, offset=9
so now I want to make the right dnd_column sticky. How do I do so?
Hi @MNongrum2,
I think you would need to create a seperate section template so you can give the section a class, then target n-th child of that parent class.
But honestly I don’t think targeting columns to make them sticky is the best aproach, it’s liable for client mishaps (i.e. client adds new column, wrong column is now sticky). What I’d probably do instead is create your columns with straight html and put seperate DnD areas in each, then the sidebar stuff stays sticky and the client can put whatever they want in there.
Or I’d just use a custom module depending on the use case.
Barry Grennan
Hi @MNongrum2
You can’t directly assign a class to a dnd_column, but you can add one to the section and style the column from there.
{% dnd_section class="sticky-column-section" %}
{% dnd_row %}
{% dnd_column width=9 offset=0 %}
{% end_dnd_column %}
{% dnd_column width=3 offset=9 %}
{% end_dnd_column %}
{% end_dnd_row %}
{% end_dnd_section %}
The catch is that this can get messy if extra columns are added later. A safer option is to build the structure with plain HTML and separate DnD areas so the sidebar stays sticky without issues.
Creating a custom module for the sticky part is the most straightforward solution.
I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!
Thanks! @BarryGrennan & @GRajput for your valuable insights!
Can I do this? -
seperate the left and right content into section templates and add the sticky inside the right section template and then add them both inside of the main template as partials
Hi @MNongrum2
In a HubSpot DnD template you can add a class on the section, then target the right column with CSS. For example: give the section class="sticky-wrap" and in your CSS set .sticky-wrap .dnd-column:nth-child(2){position:sticky;top:24px;}.
This approach relies on DnD section classes and the DnD tag’s class attribute
(https://developers.hubspot.com/docs/cms/reference/hubl/tags/dnd-areas )
One caveat: position: sticky breaks if any parent has overflow: hidden or if the column’s container isn’t tall enough do you have any overflow or transforms on ancestors?
To avoid nth-child fragility, many of us render two columns with plain HTML and drop separate DnD areas inside, or wrap the sidebar in a custom module so it stays sticky regardless of later edits.
If you’re juggling data across tools, Stacksync keeps HubSpot and your source in two-way sync, which prevents these clean-up cycles.
Hope this helps.