Customized top menu mobile display issue

Creating a WordPress website and using some theme which des not support 2nd menu.

so I added top menu using the followings:

Making new  menu and display location:

1. Code Snippets ? Add Snippet 

<?php    function wpb_top_right_menu() {        register_nav_menu('top-right-menu',__( 'Top Right Menu' ));}

add_action( 'init', 'wpb_top_right_menu' );?>

2. Appearance ? Theme File Editor ? Header

wp_nav_menu( array( 'theme_location'=>'top-right-menu', 'container_class'=>'top-right-class' ) );

it’s working in full size browser, but not for mobile and table which are reduced size. How can I fix this?

Here is the Customizing Additional CSS:

div.top-right-class ul {
	float:right;
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
    display:inline-block;
}
div.top-right-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 
 
div.top-right-class a {
    color:blue;
}

I am a new user and 1st time posting, please forgive if anything not right.

Thanks a lot for the help in advance.

• This topic was modified 10 months, 2 weeks ago by Yui.
• This topic was modified 10 months, 2 weeks ago by Yui. Reason: moved to fixing wp

The page I need help with: [log in to see the link]