Wordpress Custom Plugin CSS And <li> Tag

Question

I have an issue while trying to apply a class on an li tag from my custom plugin css. I load my plugin after the theme is setup.

    add_action('after_setup_theme', 'run_menufix');  

Still the li tag is being controlled by the theme css. Is there anything I can do here to make the plugin css to take control of the li tag? Thanks for anyput.

Answer 1

You can try like this to add your own classes

function main_menu() {
    add_theme_support('menus');
    register_nav_menus(array(
        'primary' => __('Main Menu'),
    ));
    register_nav_menus(array(
        'secondary' => __('Secondary Menu'),
    ));
}

function menu_item_class( $classes, $item, $args) {
    unset($classes);
  $classes = ["col-xs-6","col-sm-6","col-md-2","filter"];
  return $classes;
}


//Menu
add_action('after_setup_theme', 'main_menu');
add_filter('nav_menu_css_class', 'menu_item_class', 1, 3);

Answer 2

First I dequeued the theme styles and enqued added plugin styles. When I checked the html source I found that dequeued files are coming first followed by plugin file. Following code is my solution.

      wp_dequeue_style( 'child-style' ); 
      wp_dequeue_style( 'main-styles' ); 



    //re-enqueue the stylesheet 
    wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/menufix-public.css', array('child-style','main-styles'), $this->version, 'all' );