How to align the nav-menu to the left?

You can add transition to the main-navigation:

.main-navigation {
    transition: all 0.3s ease-in;
}

Awesome, thanks!

Although it's not exactly as smooth as on the original site, it works fine.

So if I want to replicate the transition-effect exactly like on the orig-site, is this possible with CSS? Or can only achieve using JS?

Theres too many differences between the original sites header and the GP one. For example, the other site uses a height property that transitions between 100px and 80px on sticky. The GP Site is using padding to make that height. So thats transition will never be the same.