I've installed Slicknav Menu plugin on my site. Now, when I go to the main page of my site and run a source code, i see a part of this plugin's css and script code:
<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>
And script code in head also:
<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>
Is some idea to remove this code from header in source code?
Here a code from plugin's php file, which generate style and script in website's source code head:
//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};
}
a.slicknav_open {
background-color:{$ng_slicknav_button_expand};
}
.slicknav_nav .slicknav_arrow {
float:{$ng_slicknav_submenu_position};
}
.slicknav_menu .slicknav_menutxt {
color: {$ng_slicknav_label_color};
text-shadow: {$ng_slicknav_label_shadow};
font-size: {$ng_slicknav_label_size}px;
font-weight: {$ng_slicknav_label_weight};
}
.slicknav_menu .slicknav_icon-bar {
background-color: {$ng_slicknav_icon_color};
box-shadow: {$ng_slicknav_icon_shadow};
}
.slicknav_nav li a {
color: {$ng_slicknav_link_color};
text-transform: {$ng_slicknav_font_case};
font-size: {$ng_slicknav_font}px;
padding: 5px 10px;
}
.slicknav_nav a:hover,
.slicknav_nav .menu-item a:hover,
.slicknav_nav .slicknav_row:hover {
background: {$ng_slicknav_link_hover_color};
color: {$ng_slicknav_link_hover_text_color};
}
.slicknav_nav input[type='submit']{
background: {$ng_slicknav_search_color};
}
}";
//If Menu button is set to left, move brand logo to right, set in Slicknav settings
if( $ng_slicknav_button_position == "left" )
$slicknav_custom_css .= "
.slicknav_brand {
float: right;
}";
//Fix menu to position in header if set in Slicknav settings
if( $ng_slicknav_fixhead == true )
$slicknav_custom_css .= "
@media screen and (max-width: {$ng_slicknav_width}px) {
.slicknav_menu {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 999999;
}
html {
padding-top: 45px;
}
}";
//Hide header if option is clicked in SlickNav settings
if( $ng_slicknav_header == true )
$slicknav_custom_css .= "
@media screen and (max-width:{$ng_slicknav_width}px) {
.site-header {
display: none;
}
}";
}
//add the above custom CSS via wp_add_inline_style
wp_add_inline_style( 'slicknavcss', $slicknav_custom_css );
}
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\\responsive_menucss' );
the SlickNav WordPress plugin is adding that code. You can load that code yourself in a more normal, correct, manner: http://slicknav.com/. Make sure to load the SlickNav js after jQuery is loaded.