For years, we've preached the importance of removing links from your landing pages: top navigation, sidebar navigation, footers, social media links -- anything that distracts viewers from filling out your form. Time over time, data has shown that removing the navigation and links from your landing pages will increase your conversion rates. Seems intuitive, right?
However, only 16% of all landing pages are free of navigation bars. We understand, though, that it can be hard for you to remove navigational elements for reasons like these:
- You don't know how to remove page elements like the top nav
- Your CEO/CMO wants to keep the navigation for branding purposes
- Your webmaster has limited time and "higher priorities" than to remove the nav
If you face any of these scenarios, you'll need to make a valid argument as to why removing the navigational elements should be a priority that's worth additional effort. At HubSpot, we put this to the test and came up with an easy solution for hiding your navigation.
How We A/B Tested Links vs. No Links
We ran a very simple A/B test across five of our landing pages that get the most traffic:
- Version A: Control landing page with top navigation, footer navigation, and social media share links
- Version B: Removed all external links, including the top navigation, footer navigation, and social media share links
The Results of Our A/B Test
This A/B test revealed that removing links from landing pages increasesconversion rates. Here's what the raw data looked like:
The first three landing pages include top-of-the-funnel (TOFU) offers: free content designed to acquire new leads and provide them with tools that can help them solve their marketing challenges. The last two landing pages include middle-of-the-funnel (MOFU) offers: exposure to the HubSpot software and a connection to our sales team.
Interestingly enough, removing external links had a much bigger impact on the MOFU landing pages. While the TOFU landing pages saw a 0-4% bump in conversion rate, MOFU landing pages had a 16% and 28% lift.
Even though the TOFU increase was small, for HubSpot, it has a major impact.
Let's say a HubSpot TOFU landing page gets 50K views, which is usual for us. If we increase the conversion rate of the landing page 2%, we'll get 1K more leads -- just by removing links. That's a fairly easy change to make.
So, although the percentages are fairly small, removing the top nav doesn't hurt conversion rates, so it's a change worth making.
If you're still not convinced, other companies have also tested removing their navigation -- and saw some pretty great results:
- Yuppiechef saw a 100% increase in conversion rates (from 3% to 6%).
- Career Point College removed the top navigation and modified its form layout, which increased the conversion rate 336%.
- SparkPage 's conversion rate jumped from 9.2% to 17.6% over the month they ran a test removing their top navigation
How to Remove Top Navigation Without Webmaster Help
So you're convinced to remove the navigational elements from your landing pages. Great! How you remove these elements from your pages will depend on what CMS you use to host your website.
If you use HubSpot, the good news is that this is super easy. Most default landing pages already don't include top navigation, so you can select one of those to build a new landing page.
If you're already using a custom landing page template that includes navigational elements, go into your template builder, find the correct template, and delete the module that includes your navigation.
If you didn't use HubSpot to build your website, you can use some simple CSS to remove your navigational elements, but it's a bit advanced. Here's what you'll need:
- Chrome (for the web developer tools)
- Access to the HTML <head> section of your landing page
- The code below and a bit of basic CSS knowledge
Using Chrome, navigate to your website, right-click the top-left corner of your navigation, and click 'Inspect Element.'
Depending on how your site was coded, you'll see either an ID or Class (or both, and then you can choose either).
Next, add the following CSS to your <head> section in your HTML file. If your site is hosted on a CMS, there's usually a place for you to add header or script code, and that's where this code goes.
If you're using an ID:
<style type="text/css">
#name-of-id{display: none;}
</style>If you're using a class:
<style type="text/css">
.name-of-class{display: none;}
</style>That's it! Once you save and refresh your page, your navigation should disappear. If anything goes awry, just delete that style code you just added to your HTML, and all will be well.
Have you A/B tested removing links and navigational elements from your landing pages? Share your results in the comments below.
![How to Create a Landing Page with High ROI [Expert and Data-Backed Tips]](https://www.hubspot.com/hubfs/Untitled%20design%20%2847%29.jpg)
![Why You Need to Create More Landing Pages [Data + Tips]](https://www.hubspot.com/hubfs/create%20more%20landing%20pages.png)
