Remove Hamburger Menu

Store Design
, , ,
7

Hi @Webtrified ,

To achieve your desired layout using CSS, we will hide the hamburger menu and search icons. We will also ensure that the navigation bar layout properly centers the product link on both desktop and mobile views. Here are the steps to make these adjustments:

CSS Changes

Hide the Hamburger Menu and Search Icon

We will use CSS to hide the hamburger menu and search icon so that they don’t appear on your site, without needing to remove the HTML code entirely.

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

Center the Product Link

To ensure that the product link is centered in the navigation bar, we can use CSS Flexbox properties:

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

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

/* Align the logo to the center */
.header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 50%;
    transform: translateY(-50%);
}

/* Align the cart icon */
.header__secondary-nav {
    position: absolute;
    right: 0;
}

Full CSS Example

Here’s the complete CSS snippet that applies these changes:

/* 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;
    align-items: center;
    position: relative; /* Allows for positioning of logo and cart */
}

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

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

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

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans