Please head over to our Understanding the header article if you want to get a better understanding of how headers work in Act2, how many headers are there and the way they are structured.
Watch a Quick Video or follow the instructions below to see how you can change your Logo:
1 Go to the Design Manager within HubSpot and open an Act2 template with the header you want to edit, then edit the global group containing the Logo module:
2 Once the global module has opened up, edit the Logo module:
3 If you want to use your default logo from Content Settings please make sure this option is unchecked:
Otherwise click the edit button (pencil icon) to replace the Act2 logo with yours.
4 When you're ready click Done and Publish your changes:
5 Optional step, if your logo is too small on mobile.
You can either increase the size of the left column, or you can use Never Stack modifier classes to change the grid on mobile. For example, you can add this class
ns-sm-span6 on both columns to make them equal on mobile:
All the available classes are:
Please keep in mind that the combined span number must be 12. Example:
6 Repeat these steps for the other global groups you use, that contain the Logo module (e.g. Sticky Header).
These are all global groups in Act2 containg a Logo module:
Act2 Sticky Header
Act2 Header Overlap
Act2 Header, Mega-Menu
Act2 Sticky Header, Mega Menu
Act2 Header Overlap, Mega Menu
Act2 Sticky Header, One-Page Website
Act2 Header Overlap, One-Page Website
Act2 LP Header
Act2 LP Header Overlap