CMS Development

Sustainabilityw
Participante

How to change CSS stylesheet - source code global footer

resolver

Hi,

 

I am totally lost with this and kwwo nothing about CSS but Hubspot support suggested I post here and I may be able to get some help.

 

I have a template created by Hubspot. In the menu, the last item on the right is a Contact Us tab - which is a Green button. I am adding two items to the menu, but now the Green box over the contact button is not in the correct space but rather two places to the left.

 

This is how it appears on my website(Correctly):

This is how it appears on Hubspot hosted pages:

 

So as I understand it, I need to find where in the source code of the global footer I would need to implement the code for the green button (and where in the CSS to delete the green wrapping module too).

 

I belive this is the source code for the website:

 

Any help would be appreciated. Given my lack of knowledge in this area, if this is not something that can be sorted over a forum like this, I will take that on board too.

 

Thanks in advance.

 

Nathan

0 Avaliação positiva
1 Solução aceita
JasonRosa
Solução
HubSpot Employee
HubSpot Employee

How to change CSS stylesheet - source code global footer

resolver

Hey @Sustainabilityw thank you! I assume that the contact button is always going to be the last item in the menu, is that correct? If so, you should be able to adjust this by going to your style-sheet here and changing line 504 from: 

 

.custom-menu-primary .hs-menu-wrapper > ul > li:nth-child(6) > a{

 

to: 

 

.custom-menu-primary .hs-menu-wrapper > ul > li:last-child > a{

 

and then changing line 522 from:

 

.custom-menu-primary .hs-menu-wrapper > ul > li:nth-child(6) > a:hover

 

to:

 

.custom-menu-primary .hs-menu-wrapper > ul > li:last-child > a:hover

Exibir solução no post original

0 Avaliação positiva
4 Respostas 4
JasonRosa
HubSpot Employee
HubSpot Employee

How to change CSS stylesheet - source code global footer

resolver

Hey, @Sustainabilityw could you link over the page that you're working on so that I can take a closer look? 

0 Avaliação positiva
Sustainabilityw
Participante

How to change CSS stylesheet - source code global footer

resolver

Hi Jason,

 

https://blog.sustainabilitywa.com.au/energy

https://blog.sustainabilitywa.com.au/energy

 

These are the pages that have the incorrect green hilight location.

Is that the link you need - or th one form within Hubspot?

 

This is the template link here, but not sure if yuo can view this:

https://app.hubspot.com/beta-design-manager/546242/templates/6291188423

 

Thanks

 

Nathan

0 Avaliação positiva
JasonRosa
Solução
HubSpot Employee
HubSpot Employee

How to change CSS stylesheet - source code global footer

resolver

Hey @Sustainabilityw thank you! I assume that the contact button is always going to be the last item in the menu, is that correct? If so, you should be able to adjust this by going to your style-sheet here and changing line 504 from: 

 

.custom-menu-primary .hs-menu-wrapper > ul > li:nth-child(6) > a{

 

to: 

 

.custom-menu-primary .hs-menu-wrapper > ul > li:last-child > a{

 

and then changing line 522 from:

 

.custom-menu-primary .hs-menu-wrapper > ul > li:nth-child(6) > a:hover

 

to:

 

.custom-menu-primary .hs-menu-wrapper > ul > li:last-child > a:hover

0 Avaliação positiva
Sustainabilityw
Participante

How to change CSS stylesheet - source code global footer

resolver

Thanks so much Jason.

 

That has fixed it. 

 

Thanks again for yuor help.