How can I get my off canvas menu to look like demo?

1. My Off Canvas menu slides, I want it to drop down like in the demo.

2. My Off Canvas menu items are missing the animated underline. 

Thanks, long time salient theme user.

Hi Noah,

I have toogled the off canvas header navigation - animation effects for quite some time. Trying different options, while comparing to the Salient demo. I can't find the exact options to get drop down action like in the demo. and need help getting animated underline. What you options in the salient demo are used? 

 when I use the off canvas, my submenu options slide rather than drop. What did you guys do to get the demo? Also, help me on the animated underline option? 

 I am using salient since 2013.  -thanks for the help

My offcanvas at cedarvistahomes.com the off canvas menu subitems slide, I need them to "drop" like the salient demo. and also that little white action line to function. thanks 

This question is for mobile off canvas.

Salient site:

http://preview.themeforest.net/item/salient-responsive-multipurpose-theme/full_screen_preview/4363266

My Site:

https://cedarvistahomes.com/

Please see attachments. 

Hey Tahir, that worked. thank you, I also had to change theme to "material" --Now I have have double menus in off canvas. Please advise. 

2 menus screen shot

Tahir, thank you  nevermind on double menu, I found code snippet in a previous ticket. 

@media only screen and (max-width: 1000px) {    body #slide-out-widget-area .mobile-only {    display: none !important;
}
}

Please last question on mobile header, how did demo slide menu out of the way as I scroll up? thank you

Andrew,

Yes, when turn "On" the off canvas Menu like you are suggesting, it also activates a off canvas menu on my desktop, I need no off canvas for desktop. please advise

I found a solution using a previous tread, I fixed using code:

@media only screen and (min-width: 768px){
li.slide-out-widget-area-toggle {
    display: none !important;
}
}

This issue is good to go.