How to fix the navigation bar that is in horizontal should be vertical in WordPress?

I am learning how to convert HTML to WordPress theme while converting I face the problem of the navigation bar in the HTML code looks like this.

The main HTML website will look like this

Now I have enqueued all the style and scripts file but still, it is causing a great problem. It still looks like the pr1 image that I first include.

the code I used to enqueue:

<!-- Enqueue the style of bs Education -->
<?php

function bsEducation_register_styles(){
    $version = wp_get_theme()->get('Version');
    wp_enqueue_style('bsEducation-style', get_template_directory_uri() . "/style.css", array('bsEducation-bootstrapCDN'), $version, 'all');
    wp_enqueue_style('bsEducation-style-rtl', get_template_directory_uri() . "/style-rtl.css", array('bsEducation-bootstrapCDN'), $version, 'all');
    wp_enqueue_style('bsEducation-boots_style', get_template_directory_uri() . "/assets/css/bootstrap.css", array(), '3.2.0', 'all');
    wp_enqueue_style('bsEducation-flexSlider_style', get_template_directory_uri() . "/assets/css/flexslider.css", array(), '2.2.0', 'all');
    wp_enqueue_style('bsEducation-font_style', get_template_directory_uri() . "/assets/css/font-awesome.min.css", array(), 'all');
    wp_enqueue_style('bsEducation-bootstrapCDN', "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css", array(),  'all');
    wp_enqueue_style('bsEducation-fontAwesome', "https://pro.fontawesome.com/releases/v5.10.0/css/all.css", array(), 'all');
}

add_action('wp_enqueue_scripts', "bsEducation_register_styles");


function bsEducation_register_scripts(){
  wp_enqueue_script('bsEducationJqueryCDN', "https://code.jquery.com/jquery-3.5.1.slim.min.js", array(), '3.5.1', true);
  wp_enqueue_script('bsEducationBootsJqueryCDN', "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js", array(), '4.5.3', true);  
  wp_enqueue_script('bsEducationCustomJs', get_template_directory_uri() . "/assets/js/custom.js", array('jquery'),'1.0',true);
  wp_enqueue_script('bsEducation-jquery', get_template_directory_uri() . "/assets/js/jquery-1.10.2.js", '1.10.2', true);
  wp_enqueue_script('bsEducationBootstrap', get_template_directory_uri() . "/assets/js/bootstrap.js", array(), '3.2.0', true);
  wp_enqueue_script('bsEducation-jqueryEasingMinJs', get_template_directory_uri() . "/assets/js/jquery.easing.min.js", array(), '1.3', true);
  wp_enqueue_script('bsEducation-jqueryFlexSliderJs', get_template_directory_uri() . "/assets/js/jquery.flexslider.js", array(), '2.2.2', true);
  wp_enqueue_script('bsEducation-scrollReveal.js', get_template_directory_uri() . "/assets/js/scrollReveal.js", array('jquery'), '2.2.2', true);
  
}

add_action('wp_enqueue_scripts', "bsEducation_register_scripts");

?>

Can anyone please help me I am really eager to know how to fix please help?

Answer

function textdomain_menu_item_class( $classes, $item ) {

    $classes[] = "list-inline-item";
    return $classes;
}

add_filter( "nav_menu_css_class", "textdomain_menu_item_class", 10, 2 );

Advertisement

Answer