Look into

Hi there,

do you want the line to span from left to right ?

IF POSSIBLE THEN Left & RIGHT BOTH side like -

! TEST TEXT !

HI,

At present, it's looking like this (First snapshot).

I want to shift its direction from the bottom to the left and if can add another line towards the right like (second snapshot).

Also, focus on the below line -

another thing is when the current page is active then hover line remains stick with the current page title, so I want to hide it for a current active page or it may work as a hover even for the active page instead of freezing.

I want to shift its direction from the bottom to the left and if can add another line towards the right like (second snapshot).

Unfortunately this isn't something we can help with here as it requires custom CSS code.

The hover animation we've provided in the documentation is just a very common effect.

another thing is when the current page is active then hover line remains stick with the current page title, so I want to hide it for a current active page or it may work as a hover even for the active page instead of freezing.

I believe what you want is to remove:
.main-navigation ul.sub-menu> .menu-item.current-menu-item > a::after,

from this block of CSS:

.main-navigation ul.sub-menu> .menu-item.current-menu-item > a::after, .main-navigation ul.sub-menu> .menu-item.current-menu-ancestor > a::after, .main-navigation ul.sub-menu> .menu-item > a:hover::after {
    width: 20%;
}

No not asking to recode etc...I have already made the changes and applied them to the submenus.

if left-right is not possible for you and you think you need to code CSS then just guide how to shift underline direction from bottom to left, it's enough to help for me.

It's not possible to simply move something from left to right without recoding it.

The easiest way to achieve a certain effect like this is to find a live example, then use the browser inspector tool to determine the CSS used.

Thanks for your understanding.

Fine ignore then...

Sounds good :)