Edit logo

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:

Act2 Template Builder Edit Logo - Step 1

Act2 Template Builder Edit Logo - Step 1

2 Once the global module has opened up, edit the Logo module:

Act2 Template Builder Edit Logo - Step 2

Act2 Template Builder Edit Logo - Step 2

3 If you want to use your default logo from Content Settings please make sure this option is unchecked:

Act2 Template Builder Edit Logo - Step 2

Otherwise click the edit button (pencil icon) to replace the Act2 logo with yours.

Act2 Template Builder Edit Logo - Step 2

4 When you're ready click Done and Publish your changes:

Act2 Template Builder Edit Logo - Step 2

Act2 Template Builder Edit Logo - Step 2

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:

Act2 Template Builder Header Columns Edit CSS

Act2 Template Builder Header Columns CSS Class

All the available classes are:

ns-sm-span1
ns-sm-span2
ns-sm-span3
ns-sm-span4
ns-sm-span5
ns-sm-span6
ns-sm-span7
ns-sm-span8
ns-sm-span9
ns-sm-span10
ns-sm-span11
ns-sm-span12

Please keep in mind that the combined span number must be 12. Example:

ns-sm-span3 and ns-sm-span9
ns-sm-span4 and ns-sm-span8
ns-sm-span5 and ns-sm-span7
ns-sm-span6 and ns-sm-span6

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 Header
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