Consolidating stylesheets

[jyoumell]

Hi all,

Apologies if this is more straightforward than the potential solutions that I've tried to uncover thus far. I've reached out to support, and they've recommended that I post here (thank you for reading!).

I'm running into an issue with using two separate stylesheets that I'd like to consolidate into one. For this page, my site uses this attached stylesheet: custom/page/Vast_Theme/vast-style.css , while all other pages (example: other page), this stylesheet: Vast/Coded_Files/vast-style.css

The end result we want to avoid is that the main navigation menu (top of the screen on all pages) is sized differently on the homepage versus all other pages. We want the menu to look consistent - and we wondered what the easiest solution might be?

Thank you very much for your time!

Jake

[Stephanie-OG]

Hi Jake!

The difference between the two is the widths for the "page-center" class:

• custom/page/Vast_Theme/vast-style.css has a page-center of 1080px
• Vast/Coded_Files/vast-style.css has a page-center of 1200px

You could update the page-center on one or both stylesheets to match or, if you just want to change the width of the headers, on the global-header, remove the "page-center" class and add in a new "header-center" that has the same width on both. 

Let me know if you need any further clarification on that. 

---

HubSpot Design / Development / Automation

Website | Contact

[jyoumell]

Thank you so much, Stephanie! Quick question – I tried to update the page-center to match on both (at 1200px), but it seems to still load the menu differently (notice the smaller text on the menu items on the Homepage versus the Services page). Did I miss something with making the two page-center update? 

Best,

Jake 

[Stephanie-OG · Accepted solution]

No problem at all!

The two have different styling for their menus as well. 

The homepage has the following code: 

.custom-menu-primary .hs-menu-wrapper > ul > li{
    background:
    font-weight: normal;
    text-transform: uppercase;
    font-size: 14px;
    margin-right: 10px;
}

The services page has the following code: 

.custom-menu-primary .hs-menu-wrapper>ul>li {
    background: font-weight:normal;
    text-transform: uppercase;
    font-size: 1.125rem;
    margin-right: 10px;
}

You can update the font-size on one or the other. When you do, there are still differences in the paddings and margins of the two so they'll be spaced differently. For example, on the services page the following code is adding padding to the left: 

ul li {
    list-style: none;
    padding-left: 2rem;
    position: relative;
    text-indent: -17px;
}

If I add that to the homepage template, it will apply it all list items on any template that uses your stylesheet so you may want to narrow it down to the header menu specifically. Like this, for example: 

.global-header ul li {
    list-style: none;
    padding-left: 2rem;
    position: relative;
    text-indent: -17px;
}

---

HubSpot Design / Development / Automation

Website | Contact

[jyoumell]

Thanks so much, Stephanie!