File this under problems that are hard to google. I want to make the answer for this OceanWP theme broken navigation link problem easier to find.
Single Page Website Navigation Links
Single page websites are sites where all of the content is on the same page. Sites like this usually still have a traditional navigation menu. The navigation menu links scroll you to various sections of the page.
This type of navigation is easy to achieve with HTML id attributes and #name href locations.
That sounds complex but it’s really not. Page builders like Elementor make this especially easy.
You first create your long web page.
Then somewhere in the middle where you want to hop, add a CSS ID to that section. The resulting HTML looks like:
Then you create a link with a hash mark in front of the tagname like so:
The main thing to remember is the link uses the hash mark (pound sign) and the CSS id does NOT have it.
In the WordPress menu dashboard, you can create Custom Link menu items that have #tagname as the URL to create the inner page scroll effect from your main menu.
The Problem With OceanWP and Elementor Anchor Menus
The answer is to login to your WordPress Dashboard.
Go under Theme Panel on the left-side menu and choose Styles & Scripts.
Search through all of the boxes for Scroll Effect and disable it. It is turned off by clicking the green slider seen below so that it turns grey for disabled.
I hate “smooth scrolling” on a site too. I recommend you find the smooth scrolling box and turn that off.
Click the Save Changes button at the top of the page when you’re done.
A Note To Theme Developers and Front End Coders
Thank you for listening. 🙂
If you are a regular WordPress site owner or an agency that builds sites and you need help overcoming a problem, our OnSiteWP One Time Fix It service is designed to be a low cost way to get over your hurdle. Please see our WordPress Support Pricing page for our fix-it service details.