Remove Hamburger Menu

Store Design
, , ,
12

Sorry for the late reply here. Thanks for the help on this I was able to get the logo to to show on mobile. With this code:

/* Make Logo Show On Mobile */
@media (max-width: 1200px) { /* Adjust the breakpoint as needed */

    .header__logo {
        display: block; /* Ensure the logo is displayed */
        width: 100px !important;
        height: auto !important;
        top: 50% !important;
        left: 0 !important;
    }
}

So this is the full code:

/* Hide the hamburger menu button */
.header__icon-list button[aria-controls="header-sidebar-menu"] {
    display: none;
}

/* Hide the search icon */
.header__icon-list a[aria-controls="search-drawer"] {
    display: none;
}

/* Main navigation setup */
.header__main-nav {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    position: relative; /* Allows for positioning of logo and cart */
}

/* Centering the navigation links */
.header__link-list {
    display: flex;
    justify-content: center !important;
    flex-grow: 1;  /* Allows it to take the remaining space for centering */
}

/* Center the logo */
.header__logo {
    position: absolute;
    left: 0 !important;
    transform: translateX(-50%);
    top: 50% !important;
    transform: translateY(-50%);
    z-index: 1;
}

/* Make Logo Show On Mobile */
@media (max-width: 1200px) { /* Adjust the breakpoint as needed */

    .header__logo {
        display: block; /* Ensure the logo is displayed */
        width: 100px !important;
        height: auto !important;
        top: 50% !important;
        left: 0 !important;
    }
}

/* Centering the navigation links */
.header__link-list {
    display: flex;
    justify-content: center;
    flex-grow: 1;  /* Allows it to take the remaining space for centering */
}

}

header__logo-container {
    max-width: 100%;
    height: auto; /* Allow the logo to resize */
}

/* Cart icon positioning */
.header__secondary-nav {
    position: absolute;
    right: 0;
}

However, the Buy Now button is left aligned, which ideally should stay in the center, and the logo stays on the left. Do you know how to switch the alignment on mobile?

If not, do you know how to make the Buy Now button go to the far left, like the cart icon on the other side?

Here is the screenshot on mobile:

Screenshot 2024-08-18 at 6.39.35 PM.png
Screenshot 2024-08-18 at 6.39.35 PM.png906×100 4 KB

Here is the preview link: https://scjimojruiwi50b1-69911871725.shopifypreview.com

Thanks,

Joseph