Anchor Links - Landing Position

Eva Pettifor

• April 16, 2025 03:48

Hi !

I am doing a single page website with anchor links in the menu bar. It's all working technically as it should so that's great however the landing spot is right at the text heading (not at the start of the section) and looks very squashed with no breathing space above it.  I have tried adding a spacer, padding or space to the heading itself but to no avail. The anchors are currently set for the section as that seems to make the most sense for navigation. Is there a protocol that I can use to give it about 50px top padding to the anchor area?

Secondly, can I get the menu page to display the active colour when I'm on the anchor, I noticed it doesn't do anything, it remains at it's default link colour.

Here is the site: https://emmadorejobhunt.brizy.site/

Thanks.

0

• 

  Ariel H.

  • April 16, 2025 08:53
  • Edited

  Hi Eva,

  Thank you for contacting us.

  To fix the issue, please use the CSS code below to the Custom CSS field in the Brizy builder. You can see where I placed it in this screenshot: https://i.imgur.com/fTJMVuJ.png

  In this example, this code targets the #about block and uses the :before pseudo-element to create an invisible spacer above it. This prevents the section from being hidden under the sticky header when the "About" menu link is clicked. The height and margin-top values are the same (but opposite) to create the needed offset.

  #about:before {
    content: "";
    display: block;
    height: 60px; /* adjust value based on sticky header height */
    margin-top: -60px; /* this should be the same value as height */
    visibility: hidden;
    pointer-events: none;
  }

  Also, if you'd like to change the menu hover color, you can follow the steps shown in the screenshot below:

  

  Feel free to try it out and let me know how it works for you.

  Best regards,  
  Ariel H.

  0
• 

  Eva Pettifor

  • April 17, 2025 04:19

  Hi Ariel

  Thank your for your CSS solution, it looks great on Desktop now - can you advise how I handle tablet and phone though? Because now those views have too much space on the top.

  Also with the hover colour - I'm aware of this and I have hover working fine. It's the Active state that is not working. I've set it to blue but on the website nothing happens when you go to the section.

  
  
  https://emmadorejobhunt.brizy.site/#what-we-do
  
  

  Thanks.

  0
• 

  Ariel H.

  • April 17, 2025 08:50

  Hi Eva,

  Thank you for the update.

  To fix the spacing issue on tablet and mobile, you can add media queries to adjust the offset height. Here's an example that includes both #about and #what-we-do. If you have multiple anchor sections, you can simply add more selectors separated by commas.

  You can add this in Project Settings > Code > Custom CSS:

  
  #what-we-do:before,
  #about:before {
    content: "";
    display: block;
    height: 50px;
    margin-top: -50px;
    visibility: hidden;
    pointer-events: none;
  }

  @media (max-width: 1024px) {
    #what-we-do:before,
    #about:before {
      height: 25px;
      margin-top: -25px;
    }
  }

  @media (max-width: 767px) {
    #what-we-do:before,
    #about:before {
      height: 25px;
      margin-top: -25px;
    }
  }

  If you need to target more sections, just list them like this:

  #section1:before,
  #section2:before,
  #section3:before {
    /* styles */
  }

  
  As for the Active state, that's usually triggered when the page scrolls to the anchor section. If it's not showing, double-check that:
  - The menu link's href exactly matches the section's ID (like #what-we-do).
  - The section is not nested too deeply or inside a container.

  Best regards,  
  Ariel H.

  0
• 

  Eva Pettifor

  • April 22, 2025 05:13

  Hi Ariel

  Thank you for the extra CSS, I shall look at adding this to my site shortly, much appreciated.

  I am still unable to get the active page navigation to show the active colour though.  I have applied the anchor name to the top level section (not a nested area) and also the naming matches the menu and the anchor name... it definitely doesn't work for me.  Are you able to check what I've done wrong?

  The site is here, with a link to the first anchor section: https://emmadorejobhunt.brizy.site/#about-us

  

   

  

   

  Thanks

   

  0
• 

  Ariel H.

  • April 22, 2025 09:44

  Hi Eva,

  Thank you for the update. I've asked a colleague to look into this issue and will follow up as soon as I hear back.

  Best regards,  
  Ariel H.

  0
• 

  Ariel H.

  • April 22, 2025 14:42

  Hi Eva,

  Thank you for your patience. I’ve received feedback from my colleague, and it appears this behavior is intentional. The active state of a menu item doesn’t apply to single landing pages. We understand this can be limiting and have noted it for future improvements. I’ll also check if there’s a possible CSS workaround and will get back to you.

  Best regards,  
  Ariel H.

  0
• 

  Eva Pettifor

  • April 22, 2025 23:08

  Thanks for following up.

  A css workaround would be good in the interim. Thanks.

  0
• 

  Ariel H.

  • April 23, 2025 11:59

  Hi Eva,

  Thank you again for your patience.

  I’ve confirmed that, unfortunately, we don’t have a CSS-fix for this at the moment. The menu elements in Brizy are rendered as buttons, not regular HTML anchor links, which means the typical CSS tricks for adding an "active" state won’t work.

  Achieving this behavior would require a more complex approach involving both JavaScript and CSS, and as such, falls outside the scope of what we currently support.

  That said, we truly value feedback like this. I recommend submitting this as a feature request via our Ideas and Roadmap page at https://www.brizy.io/ideas-and-roadmap so our product team can consider it for future updates. Sorry for the inconvenience.

  Best regards,  
  Ariel H.

  0
• 

  Eva Pettifor

  • April 28, 2025 04:55

  OK thanks, I submitted it to the idea board

  0

Please sign in to leave a comment.