In GP, the main navigation menu seems to be consisting of two elements that are nested inside each other: #primary-menu and #menu-primar
I see that #primary-menu also contains an element that is empty, “menu-bar-items”. Is there any particular reason for this and is there any way we can remove the #primary-menu container if it is not used in our case so that we only have the #menu-primar container, which seems to be enough in our case? Perhaps a filter that can be used or such?
Thank you in advance!
#menu-primarin GP. Is that from a plugin?
If you want to disable the GP Navigation, you can go to Appearance > Customize > Layout > Primary Navigation and set the Navigation Location to No Navigation.
As for the menu-bar-items, that’s a container for elements like Search and Cart. You can also hook various elements there.
My bad. It seems to be a native part of WP, where the name of the WP-menu is appended to the class name, “menu-“, and given our menu’s name is “Primär” it ended up with menu-primar.
I guess then the question becomes if we can replace the GP #primary-menu with the native ul#menu- element? As it seems redundant to have the container element? Thank you again.
For reference, can you share the link to your site? I’ll check your structure and assess if it’s possible.
I see the following on line 178/179:
<div id="primary-menu" class="main-nav"> <ul <?php generate_do_element_classes( 'menu' ); ?>>
Is there a reason #primary-menu exists here? It seems quite redundant when it can just be replaced by its immediate and only child (the
<ul>)? I don’t see any classes or styles assigned to it either.
main-navclass is used extensively in the styling of the navigation. And its not removable.
What is the problem you’re trying to solve ?
Hi David, we are getting errors about DOM depth on Pagespeed and it mainly is because of our menu having items nested 3 layers. We’ve done a lot of optimizations to flatten it ourselves such as integrating the icons into the list items and so on but now we see this element, which seems redundant and which would remove the error for us completely. Is it not possible to add the
.main-navclass to the
<ul>element directly? It seems redundant to have two immediate elements with unique identifiers. Isn’t it possible to integrate these two elements into one? It’s not the whole world by any means, would just remove an error we’re geeking about and seems like a redundancy in the theme’s DOM structure (unless there’s something I’m not seeing)
Thank you again
That’s a core node for styling and as mentioned by David, it’s not removable. Usually, DOM depth issue is caused by the content of the site itself. Can you share the link to your site? Perhaps we can analyze it and recommend something else.
Ok, no problem. Guess we’re just geeking out. I thought it was some obvious redundancy that could be tightened further but in this case it’s no big deal. Thank you anyway for the help!
- You must be logged in to reply to this topic.