Anchor point being hidden behind sticky menu

Hi

I’m using your Sydney Theme on Wordpress and I seem to be having problems with the anchor point disappearing/hiding behind the sticky menu. I’m building a 1-page website so it’s important that I keep the stick menu.

I have reduced my logo height to 75px and set my Header height to 100px.

I’m not using SiteOrigin - Page Builder but building my site using Beaver Builder.

I’m using 3 types of anchor links…

  1. The home page “CLICK TO BEGIN” call to action button that is set to #primary.
  2. About menu - which is created using a custom link http://merwevilleaccommodation.com/#my-aboutus-id and the Beaver Builder module ID=my-aboutus-id. https://kb.wpbeaverbuilder.com/article/121-smooth-scrolling-links.
  3. Inside the Beaver Builder row module, there is a Down Arrow feature which places a soft scroll arrow at the bottom of the section. Inside this feature it allows one to compensate for the sticky menu problem by adding a value in Top Offset (If your theme is using a sticky menu, then enter the header height in PX (numbers only) to avoid overlapping of row content). See uploaded screenshot.

I’m struggling to ascertain whether the Down Arrow - Top Offset feature is working. It doesn’t seem to be? Is there any way to get this working properly? And, is there a way to add some CSS code to offset the link point to compensate for the sticky menu?

Thanks, Kb

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

@media (min-width: 1025px) {
    #primary,
    #my-aboutus-id {
        padding-top: 98px;
        margin-top: -98px;
    }
	
    #my-testimo-id {
        padding-top: 15px;
        margin-top: -15px;
    }

    #my-gallery-id {
        padding-top: 35px;
        margin-top: -35px;
    }
}

Please create a new topic for your arrow issue in order to make it easier to help you.

Kind Regards, Roman.

Thanks Roman

That solved the problem. Great service as per usual!

Kb

Hi Roman

The code above worked like a charm on desktop but not for mobile.

Is there a way to resolve this?

Also, how can i remove the Call to Action button only on mobile?

Thanks Kb

Hello,

It looks like this issue requires some coding and testing on different screen resolutions, this goes beyond our support policy. It’s considered advanced customization. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork.

Please create a new topic for your Call to Action button issue to keep forum in good order and make it easier to help you.

Kind Regards, Roman.

Noted, with thanks
Kb

You are welcome,

Kind Regards, Roman.