How can I fix the non-transparent header issue on mobile?

Store Design
, ,
1

Hi! We are using the Impact theme with a transparent header, which looks great on desktop, but falls a bit flat on mobile (it’s not visible due to the subject behind it.) Is there a way to not allow a transparent header only on mobile devices? A way to get a solid background header on mobile while keeping the transparent header overlayed over the media on desktop?

2

Yes, it’s possible to achieve a solid background header on mobile devices while keeping the transparent header overlayed over the media on desktop in the Impact theme. You can use CSS media queries to target specific screen sizes and apply different styles accordingly.

Here’s a general guide to implementing this:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Impact theme you’re using and click on the “Actions” button, then select “Edit code” from the dropdown menu.
  3. In the code editor, locate and open the theme.scss.liquid or theme.css file.
  4. Scroll to the bottom of the file and add the following CSS code:
/* Styles for mobile devices */
@media (max-width: 767px) {
  /* Add your desired background color or style for the header */
  .site-header {
    background-color: #your-color;
    /* or */
    background-image: url('your-image.jpg');
  }
}

/* Styles for desktop devices */
@media (min-width: 768px) {
  /* Add the transparent header styles */
  .site-header {
    background-color: transparent;
    /* Additional styles for transparent header on desktop */
  }
}
​
  1. Customize the background-color or background-image properties within the media query to achieve your desired background style for the header on mobile devices.
  2. Save the changes to the file.

This CSS code uses media queries to target devices with a maximum width of 767px (mobile devices) and devices with a minimum width of 768px (desktop devices). Within each media query, you can define different styles for the header based on the screen size.

3

Thanks for your reply!

After adding the code to theme.css I see a flash of white (the color I chose) when I load the page on a mobile device. It does, although, still appear as a transparent overlay on mobile, which is the issue as it’s not showing up due to the black logo and the subject on the media behind it also being on the dark side. I tried unticking the “Allow transparent header” option in the theme customizer to see if it did anything, but that also removes the transparent header overlay in a desktop browser.

Any other suggestions?

4

Hi @ckstudio could you share your store URL?

5

Hi!

The URL is https://christopher-kreiling-studio.myshopify.com/

The password to access is: gMympk

6

Any help?

7

Hi, you can try to add this CSS to check

@media screen and (max-width 749px) {
.header__wrapper {
background: #ffffffb0;
}
.header.is-filled .header__wrapper  {
background: #fff;
}
}