Remove Hamburger Menu

[Webtrified]

I have the Impact theme installed for our store, with only one product. On the navigation bar, we only have the link to the product, the logo, and the search, and the cart icon. I don't plan on adding another product to the store so the hamburger menu on mobile and the search icon are kind of useless.

Is there a way to prevent the hamburger menu from showing on mobile and completely remove the search icon?

Also This way, the nav bar on desktop and mobile will always have the link to the product in the center.

Here is what the header looks like now:

Thanks, any help would be greatly appreciated

[Sweans]

Hi @Webtrified ,

would you like to share your store URL and password if any please.

so we can check and provide you possible solution for your question.

Regards,
Sweans

[Webtrified]

Yes it's here: https://festa-pinsa.myshopify.com/

The password is: festa

[Sweans]

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

[Webtrified]

Thanks, that almost works, but the logo disappears on mobile. 

Do you know why that is happening?

[Sweans]

 Hi @Webtrified ,

The issue with the logo disappearing on mobile screens is likely due to specific CSS rules affecting the layout and visibility of elements within your navigation bar. When removing elements like the hamburger menu and search icon, these changes might inadvertently affect the logo, causing it to become hidden or misaligned on smaller screens. Here are a few potential reasons and solutions:

Potential Causes and Solutions

Flexbox Layout:

Problem: If the logo is wrapped inside a Flexbox container, the flex properties might inadvertently be causing the logo to disappear or become misaligned on smaller screens.

Solution: Ensure that the Flexbox properties are set correctly. Use properties like justify-content: center; and align-items: center; to keep the logo centered and visible. Also, make sure that flex: 1; is not applied to any elements that should not be stretching or shrinking.

.header__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

Media Queries:

Problem: Media queries might be targeting the logo and setting display: none; or similar properties, causing it to disappear on mobile screens.

Solution: Check for any media queries that affect the logo's visibility. Override these styles by ensuring the logo remains visible across all screen sizes.

@media (max-width: 768px) { /* Adjust the breakpoint as needed */

    .header__logo {

        display: block; /* Ensure the logo is displayed */

    }

}

Z-Index or Overflow Issues:

Problem: CSS rules might be causing the logo to be pushed out of view due to z-index or overflow properties, especially if other elements have higher stacking contexts or hidden overflows.

Solution: Ensure that the logo has a higher z-index if needed, and check for any overflow: hidden; properties that might be clipping the logo. Adjust these properties to ensure the logo remains visible and above other elements.

.header__logo {
    z-index: 10; /* Ensure the logo is above other elements */
}

Container Sizing:

Problem: The container holding the logo might be too small on mobile screens, causing the logo to be cut off or not displayed at all.

Solution: Check the dimensions of the logo container and ensure it has enough space. Use max-width, height, or flex-basis to ensure the container adapts well to different screen sizes.

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

Visibility Settings:

Problem: There might be CSS rules explicitly setting the logo's visibility to hidden or changing its opacity.

Solution: Ensure no visibility settings like visibility: hidden; or opacity: 0; are applied to the logo unintentionally.

.header__logo img {
    visibility: visible;
    opacity: 1;
}

Final Recommendations

Inspect CSS Rules: Use your browser's developer tools to inspect the CSS rules applied to the logo. Look for any conflicting styles that might be causing the issue.

Test Across Devices: After making the changes, test your site on various devices and screen sizes to ensure the logo remains visible and centered.

Backup Original CSS: Always back up your original CSS files before making significant changes, so you can revert if needed.

By addressing these potential causes, you should be able to ensure that the logo remains visible and correctly positioned on mobile screens. If you continue to experience issues, further inspection of the CSS and HTML structure might be needed to identify any overlooked factors.

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,
Sweans

[Webtrified]

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:

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

Thanks,

Joseph

[Sweans · Accepted solution]

Hi @Webtrified ,

To adjust the alignment of the "Buy Now" button on mobile, you can use the following CSS:

@media (max-width: 768px) {
.header__wrapper {
    display: flex;
    justify-content: space-between;
}
.header__logo {
    display: block;
    width: 100px !important;
    height: auto !important;
    order: 1;
    transform: unset;
    position: relative;
}
.header__main-nav {
    order: 2;
}
.header__secondary-nav {
    position: relative;
    order: 3;
}
}

This CSS makes the header's content more flexible on mobile, with the logo on the left and the "Buy Now" button either in the center or aligned to the far right, depending on its class placement.

Regards,

Sweans

[namphan]

Hi @Webtrified,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.header__main-nav {
    display: none;
}
.header__icon-list a:nth-child(2) {
    display: none;
}

[Webtrified]

Thanks, Namphan, but that didn't quite do what I wanted. 

I want the nav bar to stay the same from desktop to mobile. As of now, on mobile, it makes a hamburger menu and moves the logo to the center.

So I want it to look like this on all devices and remove the search icon:

The code that you gave me just removed the links and the cart button:

Then this on mobile:

Thanks for your help!

[namphan]

Hi @Webtrified,

Please change code:

.header__icon-list>a:first-child {
  display: none;
}
@media screen and (max-width: 699px) {
  .header__wrapper {
    --header-grid-template: "logo main-nav secondary-nav" / minmax(0, 1fr) fit-content(70%) minmax(0, 1fr);
  }
  .header__link-list {
    display: flex;
  }
  .header__icon-list>button,
  .header__icon-list>a {
    display: none;
  } 
}

[Webtrified]

This one also almost works, but I noticed two things:

• On tablet, the hamburger menu shows up
• 
• Then on mobile the cart icon disapears
• 

[namphan]

Hi @Webtrified,

Please change code:

.header__icon-list>a:first-child {
  display: none;
}
@media screen and (max-width: 1149) {
  .header__wrapper {
    --header-grid-template: "logo main-nav secondary-nav" / minmax(0, 1fr) fit-content(70%) minmax(0, 1fr);
  }
  .header__link-list {
    display: flex;
  }
  .header__icon-list>button, .header__icon-list a[aria-controls="search-drawer"] {
    display: none;
  } 
}

[namphan]

Hi @Webtrified,

Have you tried this? 😊