Blog, Website & Page Publishing

pamsykes
Member

Floating menu bar hides headings when using anchors for navigation

I'm using anchors to support easier navigation in long blog posts -- adding anchors at H2 tags and then linking to them from a table of contents at the top of the page. But I also have a floating navigation bar -- so when a user jumps to another section using an anchor link, the heading is hidden and they are dumped straight into the second or third line of text, which is confusing. Does anyone have an idea for what I might do differently to avoid this? Thanks!

0 Upvotes
2 Replies 2
pamsykes
Member

Floating menu bar hides headings when using anchors for navigation

Thanks Josh -- I've tried messing about with the anchor link locatoin but it doesn't solve the problem. Will speak to our dev team to see what they can do with CSS. 

0 Upvotes
Josh
Recognized Expert | Platinum Partner
Recognized Expert | Platinum Partner

Floating menu bar hides headings when using anchors for navigation

Hi @pamsykes,

 

It's hard to say without being able to see it, but here are a couple of thoughts.

  • Change the location of the anchor link so the navigation doesn't fall directly over your headings. Potentially in the content directly above the heading. 
  • On this page, have your navigation remain static vs floating  - this would require a bit more work, but it's doable.
  • There may be something you can do with CSS, but I think this will be tricky since the navigation element is "floating" over the page content.

Josh




Did this post help solve your problem? If so, please mark it as a solution.

Josh Curcio

HubSpot support and inbound marketing for OEMs, contract manufacturers, and industrial suppliers.
HubSpot Platinum Partner & HubSpot Certified Trainer