After implementing the Slicknav Menu plugin on my website, I noticed that a portion of the plugin's CSS and script code is visible when inspecting the source code of the main page:
<head>
...
<style id='slicknavcss-inline-css' type='text/css'>
.slicknav_menu {
display: none;
}
@media screen and (max-width: 768px) {
#responsive-menu {
display: none;
}
.slicknav_menu {
display: block;
background: #8c8c8c;
}
.slicknav_btn {
background-color:#f7634c;
float:right;
}
a.slicknav_open {
background-color:#dd3333;
}
...
</head>
Additionally, there is script code in the header section:
<script type='text/javascript'>
/* <![CDATA[ */
var slickNavVars = {"ng_slicknav":{"ng_slicknav_menu":"#responsive-menu","ng_slicknav_position":"body","ng_slicknav_parent_links":true,"ng_slicknav_close_click":true,"ng_slicknav_child_links":false,"ng_slicknav_speed":400,"ng_slicknav_label":"","ng_slicknav_fixhead":false,"ng_slicknav_brand":"","ng_slicknav_search":false,"ng_slicknav_search_text":"search...","ng_slicksearch":"http:\/\/ali-coupons.net\/","ng_slicknav_closedsymbol":"\u25ba","ng_slicknav_openedsymbol":"\u25bc","ng_slicknav_alt":""}};
/* ]]> */
</script>
I'm considering removing this code from the header within the source code. Here is an excerpt from the plugin's PHP file which generates the style and script in the head section of the website:
//All the user input CSS settings as set in SLicknav settings
$slicknav_custom_css = "
.slicknav_menu {
display: none;
}
@media screen and (max-width: {$ng_slicknav_width}px) {
{$ng_slicknav_menu} {
display: none;
}
.slicknav_menu {
display: block;
background: {$ng_slicknav_background};
}
.slicknav_btn {
background-color:{$ng_slicknav_button};
float:{$ng_slicknav_button_position};
...
};
}
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\\responsive_menucss' );