How can I fix visibility issues with my transparent hamburger menu on desktop?

Store Design
, , , ,
1

hi,

my store url is - https://by-hala.com/

I used the below code for the hamburger menu on desktop-

@media screen and (min-width: 990px){
.header–top-center>.header__search, .header:not(.header–top-center) *>.header__search {display: none !important;}
.header:not(.header–middle-left) .header__inline-menu { display: none !important;}
.header–top-center *>.header__search, .header:not(.header–top-center)>.header__search { display: inline-flex !important;}
header-drawer {display: block !important;}
}

my header Is transparent. because of that when I open the hamburger menu on desktop, the header is visible. can we please make it disappear? pls see image attached marked in red.

Screenshot 2023-04-24 at 4.59.39 PM.png
Screenshot 2023-04-24 at 4.59.39 PM.png2624×1400 226 KB

1 Like
2

Hi @Prarthana ,

I understand that you want to hide the close icon in the hamburger menu. Not the hamburger menu? For that you can try the code below.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “theme.scss.liquid” or “styles.scss.liquid” file, depending on which file your theme uses to store its CSS styles. (better you put in the theme.scss folder since it’s a header).
  4. At the bottom of the file, add the following CSS code:
@media only screen and (min-width:990px) and (max-width:1441px) {
    svg.icon.icon-close {
    display: none;
    }
}

I hope it help.