Move op navigation lower to the bottom of slider

How do I move my top navigation to appear in the bottom of the slider? (See screenshot below)

URL: http://webworxworld.com/client-demo5/

 

Hello,
Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.menu-wrapper {
margin-top: 725px;
}

Adjust the value of margin-top as per your requirement.
This will solve your issue.

 

Thanks Piyush, that works but creates 2 new issues:

1. Is it possible to fix it at one spot, because when I open the same site in bigger screen the navigation bar is in middle of slider but in the smaller screen it's right at the bottom of slider... Please let me know.

2. The menu now appears in the middle of the page for the insider pages like about us etc. I only want to lower the menu on home page... in all other pages it should show up in header area. How do I fix this?

 

Hello,

Paste this code instead of above provided code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.home .menu-wrapper {
margin-top: 445px;
}
 
@media only screen and (min-width: 1401px) and (max-width: 1800px) {
.home .menu-wrapper {
margin-top: 445px;
}
}
 
@media only screen and (min-width: 1141px) and (max-width: 1400px) {
.home .menu-wrapper {
margin-top: 445px;
}
}
@media only screen and (min-width: 960px) and (max-width: 1140px) {
.home .menu-wrapper {
margin-top: 445px;
}
}
@media only screen and (min-width: 767px) and (max-width: 960px) {
.home .menu-wrapper {
margin-top: 445px;
}}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.home .menu-wrapper {
margin-top: 25px;
}}
@media only screen and (max-width: 480px) {
.home .menu-wrapper {
margin-top: 12px;
}}

You have to adjust the values of margin-top as per your requirement.
We would like to suggest you that always use the same dimension of images for the slider and then adjust the values of margin-top according to the respective media screen.
This will solve your both the issue.