How to Fix the SEO Issue with Nav Menus in Off Canvas Pop Up Menus - Elementor Wordpress Tutorial

Nav Menus inside Off Canvas Pop Up Menus won't be enough to feed the Menu for SEO and that can affect your Sitemap Indexing.
This how to fix it.
Book your 1-2-1 Consultation: websquadron.co.uk/socials
How to Fix the SEO Issue with Nav Menus in Off Canvas Pop Up Menus - Elementor Wordpress Tutorial
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your TH-cam Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 [e-mail]
👩‍💻 Visit websquadron.co.uk

[@MartinSachaCharles1975]

Thanks for this vidéo. On my french Wordpress group, I've explained so many times that popup menu are a bad practice for SEO. But I had no quick and simple solution to share. Now I have one :)

[@websquadron]

Glad it was helpful :)

[@pixelgap]

Hi Imran. Thank you for this video. Isn't duplication of the nav a problem from Google's perspective? I've read that hiding a menu might get you penalized by Google. Is that right?

[@websquadron]

I’ve not seen that affect sites and it’s not really duplication as the mega menu isn’t classed as a menu due to its construction.

[@meisterleise]

I had the same idea, but I did it by CSS display:none. Should do the same, right?

[@websquadron]

Display:none is just as good.

[@gianmarcogiuliarig]

Hello Friend how are you? I wanted to know if you can help me animate the submenu entry in the elementor navigation widget. I mean that if we see in the Blocksy theme, for example, the submenu moves from bottom to top, while in the elementor nav, the submenu simply appears without any animation. I don't know if you know what I mean.
Thank you in advance!

[@websquadron]

Try this to a code snippet.
Take a backup first.
jQuery(document).ready(function($) {
$('.elementor-nav-menu--dropdown > .elementor-item-sub-menu').hide();
$('.elementor-nav-menu--main > .elementor-item-has-children > .elementor-item-anchor').hover(function() {
$(this).siblings('.elementor-item-sub-menu').slideDown(1000);
}, function() {
$(this).siblings('.elementor-item-sub-menu').slideUp(1000);
});
});

[@mfrapp20]

So, with this in mind, if you had a normal nav menu on desktop but an off canvas on mobile and tablet (with the desktop menu hidden), you shouldn’t see any negative impacts from the SEO side of things?

[@websquadron]

Tech-ni-c-ally no.
It should all be fine.

[@gexcube1981]

I have wordpress but the menu is superimposed offcanvas on smartphones, tablets and not the main menu, why?
how to solve it?

[@websquadron]

Might be Z-Indexing.
Maybe set the Nav-Menu to be 9999 Z Index

[@Simon-sly]

Can the off canvas popup menu not be read also?

[@websquadron]

Technically it''s not there until activated, and then the JS pulls the template over.

[@Simon-sly]

@@websquadron Wow, I assumed it was still there in the code, readable by Google.

[@websquadron]

@@Simon-sly To be honest, so did I, but it's been a bug-bear for a while. In the past I would add to the footer so it's visible, though adding to the Header makes more sense.

[@fatjay9402]

But dont you have now 2 menus with the same links ?

[@websquadron]

Yup but one is completely hidden.
And the off canvas menu isn’t visible until you click to see it. The example in the video didn’t have an off canvas menu so ignore that.

[@amdipm]

Rank math has the sitemap widget. Isn't the same?

[@websquadron]

If you're using RankMath then yes.

[@eleanor.shadow]

@@websquadron sorry to borrow someone else's question: just so I'm sure I understand, if you have RankMath's sitemap activated then you don't need to do any of this duplicating menus before activating a mega menu on Elementor?

[@websquadron]

@@eleanor.shadow I've not tested the theory behind that but would still add it.

[@eleanor.shadow]

@@websquadron gotcha. Thanks for replying.

[@y9gq37]

A little late. So this only applies if you use an off canvas popup for your menu on all breakpoints and not when using normal navigation menu on the desktop.

[@websquadron]

Thanks

[@DJTechReviews]

Sorry to say, this is actually quite bad advice.
It is well known that having elements within the DOM and hidden either via display:none or visibility:hidden, harms your SEO efforts. This is seen as trying to cloak elements on a page where Google states that "“Hiding text or links in your content to manipulate Google’s search rankings can be seen as deceptive and is a violation of Google’s Webmaster Guidelines.” Doing something like this actually aligns with Black Hat SEO techniques.
The answer? If you're serious about SEO, don't use off-canvas menus. At least, not in Wordpress.

[@websquadron]

It’s been discussed a lot and as long as you have other methods to link to the same place then Google don’t care much. It’s more of a problem when it’s used to boost seo with no real aim.
I agree with you that it’s far better not to use off canvas menus and I rarely apply them.
If they are going to be used then this method is a partial aid from the sitemap pov.