Center Logo over menu

Hello,

I’ve actually done this but the code makes my menu and or logo jump left/right to original positions with the code I am using. I think I fixed it a bit, but the nav menu jumps up and then down when page renders. Can it be made to not jump all over page?

Any help is appreciated. Thanks.

My current code:

.navbar-header.responsive-logo {
text-align: center;
width: 100%;
}

a.navbar-brand {
margin: auto;
float: none;
}

/*centers menu*/
@media screen and (min-width: 767px) {
nav#site-navigation {
float: none;
margin: 0 auto;
display: table !important;
}
}

sitewebsite