CMS Development

JonnyZOO
Contributor

Sticky menu with anchor links

SOLVE

Hi there

 

I'd like to include a sticky navigation menu within this page that links to the different content blocks below.

 

Are there any good examples of how this can be achieved in HubSpot?

 

Maybe something like this: http://www.zensorium.com/tinke/ 

 

How would I go about implementing this (while keeping the main navigation at the top)?

 

Cheers, Jonny

0 Upvotes
1 Accepted solution
Jsum
Solution
Key Advisor

Sticky menu with anchor links

SOLVE

@JonnyZOO,

 

I don't know if your aware but if you add "#elementID" to tthe end if your url and "#elementID" corresponds to the id of an element on the page, then the page will load with that element in focus. 

 

That is the old school method and requires the page to reload and "#whatever" to be appended to the url of the page. 

 

A nicer method would be to use javascript/jquery, specifically a click to scroll function. Here are some results about this:

https://stackoverflow.com/questions/14524297/how-to-scroll-to-div-after-click-on-about-or-contact-in...

https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link

https://css-tricks.com/snippets/jquery/smooth-scrolling/

 

Essentially the idea is that when a menu item is clicked, the page will scroll until the element assigned to it (by class, id, or data-type) will have it's top at position 0, or the position that you specify. 

View solution in original post

0 Upvotes
2 Replies 2
Jsum
Solution
Key Advisor

Sticky menu with anchor links

SOLVE

@JonnyZOO,

 

I don't know if your aware but if you add "#elementID" to tthe end if your url and "#elementID" corresponds to the id of an element on the page, then the page will load with that element in focus. 

 

That is the old school method and requires the page to reload and "#whatever" to be appended to the url of the page. 

 

A nicer method would be to use javascript/jquery, specifically a click to scroll function. Here are some results about this:

https://stackoverflow.com/questions/14524297/how-to-scroll-to-div-after-click-on-about-or-contact-in...

https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link

https://css-tricks.com/snippets/jquery/smooth-scrolling/

 

Essentially the idea is that when a menu item is clicked, the page will scroll until the element assigned to it (by class, id, or data-type) will have it's top at position 0, or the position that you specify. 

0 Upvotes
JonnyZOO
Contributor

Sticky menu with anchor links

SOLVE

Thanks @Jsum, this is something we've implemented on previous pages, for example the 'Reach audiences everywhere' link here: https://www.zoodigital.com/contact 

 

The trouble with this investors page is that I need to add a sticky sub-menu, with anchor links for the different sections.

 

I'm not sure on the best way to implement this through HubSpot. Would it make sense to add another menu underneath the header? Or create something that stays in place along the left-hand side?

 

How would I go about adding this to the template?

0 Upvotes