How to remove css and javascript code in source code of website

Question

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' );

score 1 · Accepted Answer · answered Jul 12 '16 at 20:40

1

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.

answered Jul 12 '16 at 20:40

Nathaniel Flick

2,902
2
22
31

More info here: http://stackoverflow.com/questions/24662650/slicknav-with-wordpress. – Nathaniel Flick Jul 12 '16 at 21:58
in this link there are another issue. I will try to load code from http://slicknav.com/ you given me and little later i will write about result.. – Vit Rasmussen Jul 13 '16 at 12:33
Ok let me know. Some cool ideas here: https://css-tricks.com/taking-control-cssjs-wordpress-plugins-load/ – Nathaniel Flick Jul 13 '16 at 15:04
Ahh..about http://slicknav.com/ - I'm not good on php but wordpress php code and wordpress slicknav plugin's php code closely connected between itselves there. I tried to remove slicknav plugin and load this solution http://slicknav.com/ to my site but it doesn't work(( – Vit Rasmussen Jul 13 '16 at 15:51
About this article https://css-tricks.com/taking-control-cssjs-wordpress-plugins-load/ - its complicated for me)) Need some easy solution) – Vit Rasmussen Jul 13 '16 at 15:55
I added a code from plugin's php file, which generate css and script code in website's header source code. Look there please. Maybe it will help to help me) – Vit Rasmussen Jul 13 '16 at 16:34
The easiest way is to not run it as a plugin but install the css and js files yourself in the template, but this isn't necessarily the correct way (enqueuing assets is). – Nathaniel Flick Jul 13 '16 at 18:01

How to remove css and javascript code in source code of website

1 Answers1