I used this
#mobile-header .menu-toggle {
order: -1;
margin-right: auto;
}
.site-logo.mobile-header-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
to get my logo in between in mobile view but when i see it through customizer the logo appears in between but when i actually see it in the mobile the logo is not exactly at center it is little aligned to right.
Also i want to know how can i increase the size of the social icon. i am using font awesome.
And in mobile view the social icon which is in secondary nav bar becomes a menu. i dont want it to become menu in mobile version instead the social icon should be visible.