Menu location adjusment for paid theme in shopify

Store Design
1

0

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.

Untitled.png
Untitled.png1862×809 112 KB

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;
    }
}

If you can help, please accept our sincerely thanks to you.

2

Hi @Tuan_classique ,

Thank you for reaching out to the Community! I’m happy to provide some assistance with your shop’s theme, to get this resolved.

To gather a bit more context, are you able to share the paid theme you are currently using?

If available on the Shopify Theme Store, I recommend getting in touch with the theme developer directly. You can do this by locating the theme within the Shopify Theme Store and selecting Support and documentation > Get Support. Alternatively, you can Contact Support directly where one of our advisors can put you in touch with the theme developer.

This will ensure they can investigate to get your navigation to populate as desired, ensuring this gets resolved!

Please let me know if you have any other questions.