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:
<div id="tagname">...</div>
Then you create a link with a hash mark in front of the tagname like so:
<a href="#tagname">...</a>
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
OceanWP has javascript for some kind of smooth scrolling effect. For whatever reason, this javascript breaks the function of navigation menu links that have a pound sign in them.
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
Dear theme developers, do not use javascript to change the basic function of the browser. Disabling links with a # character can have unintended consequences. Especially when you do it as a default behavior. Building software that is potentially dangerous by default can discourage regular WordPress site builders who do not have a background in software engineering from using the platform. Please keep this in mind and make these riskier overrides a well documented option that is off by default.
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.
Author: Brian Murphy
Brian Murphy is co-founder of OnSiteWP, a WordPress website maintenance company. His professional experience of working within enterprise IT, communication departments, startup companies and freelancing provides a unique, well rounded perspective on the issues business owners face.