Archived topic
Generate slide out menu inline style
6 replies · Started by vast on June 25, 2021
The "Search" library generates the HTML tag below
<nav id="generate-slideout-menu" class="main-navigation slideout-navigation do-overlay" itemtype="https://schema.org/SiteNavigationElement" itemscope style="display: none;">
It includes an inline style. Is there an option to externalize it to a CSS file?
Hi there,
no its baked into the template - its purpose is to ensure the element is never displayed before the necessary CSS and JS has been loaded. Without it, the element would occupy space on the screen, until its JS is loaded. The first thing the JS does is to remove the style property.
This could however be moved to an internal CSS. Inline styles throw exceptions when using content security policies. Is there an option internalize it?
The style attribute is backed into the template.
Removing it and adding it to a style sheet leads to potential breakages. If the CSS gets cached or re-ordered then we risk the element being visible on load or the element never being displayed.
The Menu Plus module is under review and we intend to update the Off Canvas Panel - so we'll see what can be done to change that.
Hi David,
Has the changed been rolled out for the Menu plus module?
Hi there,
We haven't implemented this, yet. It's something we need to be careful with as many users are deferring/loading critical CSS which could result in a negative experience. I agree it would be good to remove, so we'll definitely explore it.
Thanks Tom.
