How to change CSS stylesheet - source code global footer

SOLVE
Highlighted
Occasional Contributor

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

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
HubSpot Employee

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

Reply
0 Upvotes
4 Replies
HubSpot Employee

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

Reply
0 Upvotes
Occasional Contributor

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

Reply
0 Upvotes
HubSpot Employee

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

Reply
0 Upvotes
Occasional Contributor

Thanks so much Jason.

 

That has fixed it. 

 

Thanks again for yuor help.