Login option not showing in mobile menu drawer after making transparent header

Store Design
, , , , ,

Topic summary

A user implemented custom CSS to create a transparent header on their homepage, but this caused the login option to disappear from the mobile menu drawer.

Root Cause:
The issue stemmed from the position: fixed property in the transparent header CSS code.

Initial Suggestion:
Another user proposed CSS to display the login icon directly in the header on mobile devices, but this didn’t address the specific requirement.

Resolution:
The original poster solved the problem independently by adding padding-bottom to the utility links, which restored the login option in the mobile menu drawer while maintaining the transparent header effect.

The discussion included code snippets and screenshots demonstrating both the problem and desired outcome.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I have added custom css for making the header of my store transparent on home page only. But after I did that the login option is missing in the mobile menu drawer. This is the code that I added for transparent header,

.template-index .header-wrapper {
  background: transparent !important;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  transition: all 0.3s ease;
  box-shadow: none !important;
}

I customized the code and found out that the problem is with the position property even though changing it will affect transperancy. So can anyone suggest a solution for this.

store- https://www.valcoure.store/

password- kothavara

Thank You.

2

Hi @AnSrSi

let try to add this custom CSS code:

@media screen and (max-width: 749px) {
  .header__icon.header__icon--account {
      display: flex !important;
  }
}

then login icon will display on your mobile:

BiDealDiscount_0-1747242849976.png
BiDealDiscount_0-1747242849976.png370×869 292 KB

1 Like
3

Thank you @BiDeal-Discount , but i need the login in the menu drawer

Screenshot 2025-05-14 224738.png
Screenshot 2025-05-14 224738.png387×678 9.86 KB

Actually when I remove the position property the login option is like this. I need the login option like this even when the postion property is set to absolute or fixed.

4

Never mind, I found the solution I just added paddting-bottom to the utility links.