Remove element from DOM on mobile

Hi,

For one of the websites that I help manage, we recently added a ‘Mega-menu’ to the desktop site with links to numerous other pages on the site. The menu appears on hover, and has multiple tabs within it, all of which have various links in them. It works great, the only problem is that we’re getting dinged for an excessive DOM size on PageSpeed insights.

The mega-menu is hidden on mobile view, but it’s still appearing on the results for mobile loading on the pagespeed insights page. Because it’s hidden, shouldn’t it not be loading in when viewed on a mobile device? If there’s something I’m not understanding here, an explanation would be appreciated.

You can see the menu in action here. Hover over ‘State Credits’ or ‘Industry Credits’. Homepage


Here is my site Read-Only: LINK

Hidden elements are just visually hidden—those elements will always still appear in the DOM and affect page load in some way. There are some exceptions but for this situation you’re going to be loading the same structure regardless of whether or not the elements themselves are visible.

As far as I know the only solution to prevent elements from appearing in the DOM is to inject them as needed with JS but this isn’t something Webflow can do natively so you’d need to work with custom code.

Ok, thank you. Do you have any suggestions around how we could implement the custom code? It’s not my area of expertise, but I can pass any suggestions onto my team member who helps with that stuff.

Honestly I’m in the process of working through some JS courses now (as it’s arguably the weakest avenue of web development for me) so I’m probably not the best resource for any specific changes.

There are lots of much more talented Webflow Experts who may have experience in that type of custom code and thankfully it’s also something that I’d imagine general JS developers may be able to help out with—not to mention the wealth of knowledge available for free on the internet. I’d recommend checking those places first and see if it doesn’t help shed some light for your team to move forward with changes.

hi @design_by_shane here are two possible ways how-to

Grab element

Before any detection you should grab element you need to remove and/or add.
in your case it will be

// get mobile navigation
const mobileNav = document.querySelector(".mobile-nav-wrap")

Remove element

removing this element from DOM can be done with

mobileNav.parentNode.removeChild(mobileNav)

Remove element based on viewport width

// Option 1 - remove element based on viewportWidth

const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)

function removeFromDomBasedOnWv(width){
// if width is less or equal 480 ...
    if(width <= 480){
        // ...remove element from DOM
        mobileNav.parentNode.removeChild(mobileNav);
    }
return
}
removeFromDomBasedOnWv(viewportWidth)

Keep in mind that you may need to monitor current width to add this menu back as it will change eg. portrait / landscape


Remove element using userAgent

// Option 2 - detect if the user is using a mobile device 
const deviceType = () => {
    const ua = navigator.userAgent;
    if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
        return "tablet";
    }
    else if (/Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(ua)) {
//         return "mobile";
             mobileNav.parentNode.removeChild(mobileNav);
    }
    return "desktop";
};

These are only basic examples how it can be done so you can take it from here further as there is many resources on net about detecting and removing from DOM.

Thank you! I’ll give those options a try and see how it helps.

hi @design_by_shane as I have mentioned these are just pure examples and keep in mind that return will stop if/else condition (opt.2 tablets) so for testing replace return with something else or add mobileNav.parentNode.removeChild(mobileNav); also for tablet devices to see results. At second you can use only one condition e.g. for mobiles etc.

For removing element you should be fine with Option 1 but you need add another condition to add this element back when width will grow (portrait/landscape) if needed.

Hi @Stan, thanks for taking the time to provide these solutions :slight_smile:. The option 2 worked perfectly for our requirement.

1 Like

hi @design_by_shane is this request still open to be solved? if provided solutions helped to solve your problem feel free to close your request as solved

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.