menu location adjusment in shopify - web

Question

I am hopeless and so I hope you could help us with this. I recently just bought a new theme for our site but I just want to place the menu right under the Logo As shown.
this is the screenshot and fake adjustment of what we hope we could change to
As we pressed F12 to inspect the section, we are only able to find the below code in base.css but dont know how to adjust them.
/* Header menu drawer */
.header__icon--menu .icon {
display: block;
position: absolute;
opacity: 1;
transform: scale(1);
transition: transform 150ms ease, opacity 150ms ease;
}
details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
visibility: hidden;
opacity: 0;
transform: scale(0.8);
}
.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
visibility: hidden;
}
.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
visibility: visible;
opacity: 1;
transform: scale(1.07);
}
.header__inline-menu details[open] > .header__submenu {
opacity: 1;
transform: translateY(2.7rem);
animation: animateMenuOpen var(--duration-default) ease;
}
/* Header menu */
.header__inline-menu {
margin-left: -1.2rem;
grid-area: navigation;
display: none;
}
.header__inline-menu .header__menu-item {
font-family: var(--font-header-menu-family);
font-style: var(--font-header-menu-style);
font-weight: var(--font-header-menu-weight);
text-transform: var(--font-header-menu-text-transform);
font-size: 1rem;
letter-spacing: 0.125em;
}
.header--top-center .header__heading-link {
margin-left: 0;
}
#media screen and (min-width: 990px) {
.header__inline-menu {
display: inline-block;
}
.header--middle-left .header__inline-menu {
margin-left: 0;
}
}
.header__menu {
padding: 0 1rem;
}
.header__menu-item {
overflow: hidden;
padding: 1.5rem;
text-decoration: none;
color: rgba(var(--color-foreground), 0.75);
}
.header__inline-menu .header__menu-item {
align-items: flex-start;
}
.header__menu-item > span {
position: relative;
display: flex;
flex-direction: column;
backface-visibility: hidden;
transition: var(--duration-default);
overflow: hidden;
}
.header__menu-item span:not(.header__active-menu-item) > span {
display: flex;
flex-direction: column;
backface-visibility: hidden;
transition: var(--duration-default);
}
.header__menu-item span:not(.header__active-menu-item) > span:after {
position: absolute;
transform: translateY(100%);
display: block;
content: attr(title);
color: rgba(var(--color-foreground));
}
.header__menu-item:hover span:not(.header__active-menu-item) > span {
transform: translateY(-100%);
}
.header__menu-item:hover span:not(.header__active-menu-item):after {
}
.header__menu-item .header__active-menu-item {
color: rgba(var(--color-foreground));
}
.header__icon .header__icon-name {
justify-content: flex-start;
align-items: flex-start;
overflow: hidden;
height: 1.5rem;
text-decoration: none;
font-size: 1rem;
}
.header__icon .header__icon-name span {
display: flex;
flex-direction: column;
align-items: flex-start;
height: auto;
backface-visibility: hidden;
transition: var(--duration-default);
}
.header__icon-name span:after {
display: inline-block;
content: attr(title);
margin-top: 0.8rem;
color: rgb(var(--color-foreground));
}
.header__icon:hover .header__icon-name span {
transform: translateY(calc(-50% - 0.8rem / 2));
}
.header__submenu {
transition: opacity var(--duration-default) ease;
transform: var(--duration-default) ease;
z-index: 15;
}
.header__submenu.list-menu {
padding: 0.9rem 2.2rem 0.9rem 2.2rem;
}
.header__submenu .header__menu-item:after {
right: 2rem;
}
.header__submenu .header__menu-item {
padding: 1.3rem 0;
height: auto;
}
.header__submenu .header__menu-item:hover {
color: rgba(var(--color-foreground), 1);
}
.header__submenu li:not(:last-child) {
border-bottom: 1px solid rgba(var(--color-foreground), 0.2);
}
.header__submenu .header__submenu .header__menu-item {
padding-left: 3rem;
}
.header__menu-item .icon-caret {
right: 0.8rem;
z-index: 0;
}
.header__submenu .icon-caret {
right: 0.5rem;
transform: rotate(-90deg);
}
details-disclosure > details {
position: relative;
}
#media screen and (min-width: 990px) {
.header__submenu .header__submenu .header__menu-item {
padding-left: 0;
}
}