Hola! ¡Tenemos nuestra Comunidad en Español!

Matching My SquareSpace Nav in my Hubspot Blog

SOLVE
New Contributor

Hi Everyone,

 

I am trying to match my SquareSpace Navigation to my HubSpace Blog Nav and im having lots of issues with the CSS.

 

This is a link to see my SquareSpace site

https://manatee-parakeet-bexx.squarespace.com/

 

This is a link to my Blog

https://inbound.web-foundry.co.uk/blog

 

My second issue is that my sub menu is not displaying at all and I think this could be part of the issue.

 

If anyone can help me solve this issue I would be very greatful. Please let me know if you need anything else.

 

Thank you in advance

Gem

Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Advisor

Hi @WhiteRabit ,

for the desktop version - have you tried 

.header-menu{
position:absolute;
right:50px
}

?

How did you do the sub menu? I can't see any indication for sub navigation links in the source code. Can you post a screenshot of how the advanced menu looks like?

 

Also it seems that there is a issue with the mobile navigation. 

Do you use a free template or did you wrote it by yourself?

 

If you wrote it by yourself(or if it's somehow missing in the template) here's a helpful link How to implement a mobile navigation to your site

 

regards,

Anton








check Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Highlighted
Advisor

Hi @WhiteRabit,

sure. Or maybe you've deleted the "add the file/script to <head>" hubl Smiley Happy

 

First: 

  • open your blog template in the design manager
  • look on the right sidebar inside the "additional <head>" area. Is it empty? If yes: 
    • search in the left sidebar for mobile-menu-min.js
    • once found, open it and click on options(in the top area of the left sidebar) and copy the public url
    • go back to your blog template and write this code inside the "additional <head>" area
      <script src="PASTE-THE-URL-HERE"></script>
    • save the template
    • open your blog and test it
    • does this work? If yes:
      • cut the code from the "additional <head>" area and insert it inside the footer group(within a rich-text module or better with a HTML-module which can be found in the marketplace for free)

 

If this won't work you shouldwalk trough the tutorial I've posted in the first answer. But: The tutorial was done with the old design manager which looked a bit different. But the necessary things are still the same 

 

regards

Anton








check Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
7 Replies
Advisor

Hi @WhiteRabit ,

for the desktop version - have you tried 

.header-menu{
position:absolute;
right:50px
}

?

How did you do the sub menu? I can't see any indication for sub navigation links in the source code. Can you post a screenshot of how the advanced menu looks like?

 

Also it seems that there is a issue with the mobile navigation. 

Do you use a free template or did you wrote it by yourself?

 

If you wrote it by yourself(or if it's somehow missing in the template) here's a helpful link How to implement a mobile navigation to your site

 

regards,

Anton








check Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
New Contributor

Hi @Anton 

 

That code worked thank you it has shiffed the nav into the correct place thank you so much.

 

I set up the sub menu in HubSpot (see attached image)

 

I think the template is a free one as it was in my system automatically I have gone in and tweaked it. I have not looked at mobile yet.

 

Thanks so much for your help

 

Gem

 

Screenshot 2019-04-29 at 09.50.29.png

Reply
0 Upvotes
Advisor

Hi @WhiteRabit,

glad to hear that it worked Smiley Happy

 

 

'...I think the template is a free one as it was in my system automatically I have gone in and tweaked it....'

 

I've took a look at your <head>. Your're using the "Sphere One" Template. You can find it here: 
https://app.hubspot.com/marketplace/XXX/products/thebrandmanager-au-1/sphere-one
(replace the XXX with your HubID - otherwhise the link won't work).

 

The menu module must have following class:

custom-menu-primary

 

It's(in your case) the most important class in the header group. With this class you have the dropdown and mobile functionality(you can find all the settings in "mobile-menu.min.js" file)

 

Furthermore a tip: Don't try to rewrite template parts by yourself if you don't know what is what and what has dependencies to what Smiley Happy

It's always easier to change the existing styling which were made by the template maker by inspecting them - search for the class/ID in the CSS and edit it.

 

Another tip: duolicate the vanilla files before editing them. By that you have to switch between the "original" and "your" version with ease.

 

 

regards

Anton








check Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
New Contributor

Hi Anton,

 

Thank you for getting back to me. I search for the class custom-menu-primary in my css file and its not there. Could this be the issue.

 

FYI - I don't remove any css when im tweaking a template I always note it out and add my own element as to be able to set back to the original if needed.

 

Can you point me in the correct direction for how to fix this issue please as I am very new to HubSpot.

 

Thanks


Gem

Reply
0 Upvotes
Highlighted
Advisor

Hi @WhiteRabit,

sure. Or maybe you've deleted the "add the file/script to <head>" hubl Smiley Happy

 

First: 

  • open your blog template in the design manager
  • look on the right sidebar inside the "additional <head>" area. Is it empty? If yes: 
    • search in the left sidebar for mobile-menu-min.js
    • once found, open it and click on options(in the top area of the left sidebar) and copy the public url
    • go back to your blog template and write this code inside the "additional <head>" area
      <script src="PASTE-THE-URL-HERE"></script>
    • save the template
    • open your blog and test it
    • does this work? If yes:
      • cut the code from the "additional <head>" area and insert it inside the footer group(within a rich-text module or better with a HTML-module which can be found in the marketplace for free)

 

If this won't work you shouldwalk trough the tutorial I've posted in the first answer. But: The tutorial was done with the old design manager which looked a bit different. But the necessary things are still the same 

 

regards

Anton








check Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
New Contributor

Hi Anton

 

Had to use your tutorial but got it to work finally. Thank you so much.

 

Would recommend updating the tutorial tho as took me a while to decript it with the new system.

 

Reply
0 Upvotes
New Contributor

Hi Anton,

 

I am still having issues with my sub menu iteams. They are not displaying in the regular nav and the mobile nav.

 

See screen shot from last post to see the set up in HubSpot.

 

Thanks

Reply
0 Upvotes