日本語コミュニティーへようこそ!このチャンネルは現在ベータ版です。

詳細はこちらをご覧ください。

Matching My SquareSpace Nav in my Hubspot Blog

解決
新規投稿者

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

返信
0 いいね!
承認済みベストアンサー

受理された解決策
アドバイザー

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
返信
0 いいね!
アドバイザー

Hi @WhiteRabit,

sure. Or maybe you've deleted the "add the file/script to <head>" hubl スマイリー ハッピー

 

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
返信
0 いいね!
7件の返信7
アドバイザー

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
返信
0 いいね!
新規投稿者

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

返信
0 いいね!
Highlighted
アドバイザー

Hi @WhiteRabit,

glad to hear that it worked スマイリー ハッピー

 

 

'...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 スマイリー ハッピー

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
返信
0 いいね!
新規投稿者

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

返信
0 いいね!
アドバイザー

Hi @WhiteRabit,

sure. Or maybe you've deleted the "add the file/script to <head>" hubl スマイリー ハッピー

 

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
返信
0 いいね!
新規投稿者

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.

 

返信
0 いいね!
新規投稿者

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

返信
0 いいね!