Add custom navigation menu in wordpress template

Question

I'm trying to add a custom menu over my WordPress site inside a template page. I've successfully registered new menu with this code

      function register_my_menu() {

      register_nav_menu('new-menu',__( 'New Menu' ));
    }

     add_action( 'init', 'register_my_menu' );

Now I've added this menu inside page.php and successfully getting menu items over my wordpress pages

 < ? php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>

The question is I'm seeing the menu items vertical like this http://prntscr.com/dt6300 . How can I style my custom menu? If someone could give a hint!

Answer 1

it depends on what kind of menu you want to make. You can inspect the code on the browser to see the classes of the generated HTML and create the relative CSS for each element. you can pass the container argument to wp_nav_menu :

https://developer.wordpress.org/reference/functions/wp_nav_menu/

' container '

(string) Whether to wrap the ul, and what to wrap it with. Default 'div'.

and the following arguments to give id and class to the elements:

' menu_class '

(string) CSS class to use for the ul element which forms the menu. Default 'menu'.

' menu_id ' (string)

The ID that is applied to the ul element which forms the menu. Default is the menu slug, incremented.

' container_class ' (string)

Class that is applied to the container. Default 'menu-{menu slug}-container'.

' container_id ' (string)

The ID that is applied to the container.

You can also see here: https://codex.wordpress.org/Creating_Horizontal_Menus

<?php wp_nav_menu( array( 'theme_location' => 'new-menu', 'menu_class' => 'mymenuclass', 'menu_id' => 'mymenuid', 'container_class' => 'mycontainerclass' ) ); ?>