Logo and navbar alignment issues in Wordpress site - html

Question

I need help in writing a css fix for aligning the logo and navbar in desktop and mobile responsive modes. No options available in customize menu. Thanks in advance.
My Site
Theme Used
Problem SS1
Problem SS2

Answer 1

Use can use Display flex CSS. Example your website:
<div id="header-text-nav-wrap">
<div id="header-left-section">
<!-- your logo here -->
</div>
<div id="header-right-section">
<!-- your menu -->
<!-- your searh and other -->
</div>
</div>
<style>
#header-text-nav-wrap{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#header-logo-image img{
max-height: 60px;
width: auto;
margin: 0 auto;
text-align: center
}
#header-right-section{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.main-navigation,
.header-action{
padding-top: 0;
}
#media (max-width: 768px) {
.better-responsive-menu #header-text-nav-wrap{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.better-responsive-menu #header-logo-image {
float: none;
margin-bottom: 0;
margin-right: 0;
text-align: center;
}
.better-responsive-menu #header-right-section {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
#header-right-section .header-action{
min-width: 200px;
padding-right: 15px;
}
}
</style>