CMS Development

LMorgan
Member

Editing Header Logo & Nav Position

SOLVE

We are using HS templates for new LP and TY pages. We want the logo centered on both pages (and the nav centered too on the TY page) to match the client's live site: http://www.karenkitzmiller.com/.

However both logos are to the left, and on the TY page the logo is larger, although they are both pulling from the default. 

LP link: http://blog.karenkitzmiller.com/6-steps-to-selling-a-home-ebook

TY link: http://blog.karenkitzmiller.com/6-steps-ebook-download-page

 

0 Upvotes
1 Accepted solution
DaniellePeters
Solution
Top Contributor

Editing Header Logo & Nav Position

SOLVE

If the logo was changed at some point after the pages were created and the logo module on the TYP's template is not locked, then that one would not have been updated to reflect the logo in Content Settings. The logo is technically set on page level which overrides any template settings.

 

It looks like the logo for the LP is within a Global Group and the one for the TYP is not. The logo was updated on the LP because Global Groups, by their nature, contain locked modules. As a result, they are actually pulling in two different images, with the one on the LP having a width of 320px while the TYP has a width of 484px.

 

The logo on the original website has a width of 450px.

 

My recommendation here is to add a new logo into Content Settings ensuring that has a width of 450px. This should fix the landing page image. Next, for the thank you page, swap the image in the page editor. Then, lock the module in the template so going forward, any pages using that template will respect the width set in Content Settings.

 

https://knowledge.hubspot.com/articles/kcs_article/cos-general/what-is-a-locked-module

 

Additionally, editing the following code in clarity-style.css will set set the width based on the size of the container rather than the width set in Content Settings. (I would still recommend swapping out the image because the stretching from 320px to 450px makes it blurry)

From this:

.header-container .hs_cos_wrapper_type_logo a img {
    width: auto !important;
    margin-top: 1px;
}

to this:

.header-container .hs_cos_wrapper_type_logo a img {
    width: 100% !important;
    margin-top: 1px;
}

 

View solution in original post

1 Reply 1
DaniellePeters
Solution
Top Contributor

Editing Header Logo & Nav Position

SOLVE

If the logo was changed at some point after the pages were created and the logo module on the TYP's template is not locked, then that one would not have been updated to reflect the logo in Content Settings. The logo is technically set on page level which overrides any template settings.

 

It looks like the logo for the LP is within a Global Group and the one for the TYP is not. The logo was updated on the LP because Global Groups, by their nature, contain locked modules. As a result, they are actually pulling in two different images, with the one on the LP having a width of 320px while the TYP has a width of 484px.

 

The logo on the original website has a width of 450px.

 

My recommendation here is to add a new logo into Content Settings ensuring that has a width of 450px. This should fix the landing page image. Next, for the thank you page, swap the image in the page editor. Then, lock the module in the template so going forward, any pages using that template will respect the width set in Content Settings.

 

https://knowledge.hubspot.com/articles/kcs_article/cos-general/what-is-a-locked-module

 

Additionally, editing the following code in clarity-style.css will set set the width based on the size of the container rather than the width set in Content Settings. (I would still recommend swapping out the image because the stretching from 320px to 450px makes it blurry)

From this:

.header-container .hs_cos_wrapper_type_logo a img {
    width: auto !important;
    margin-top: 1px;
}

to this:

.header-container .hs_cos_wrapper_type_logo a img {
    width: 100% !important;
    margin-top: 1px;
}