How to create transparent header

Store Design
1

Hello,

I’m trying to create a transparent header with white text that turns black on scroll. I’ve tried various codes but a problem always occurs. I also need it to work on mobile.

Here is a perfect example of what I’m looking for - https://rh-ude.com/

URL: https://www.yivan.us/

Pass: YV2024

Thank you very much

2

Hi @YIVAN ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

BSSCommerceHDL_0-1717809598993.png
BSSCommerceHDL_0-1717809598993.png1902×899 133 KB

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

BSSCommerceHDL_1-1717809606225.png
BSSCommerceHDL_1-1717809606225.png1916×934 101 KB

Step 3: Insert the below code at the bottom of the file → Save

.header {
  max-width: 100% !important;
}

body:has(.header--has-menu.transparent) ul.list-menu.list-menu--inline a span,
body:has(.header--has-menu.transparent) .header__menu-item.list-menu__item span,
body:has(.header--has-menu.transparent) .header__menu-item.list-menu__item svg.icon.icon-caret,
body:has(.header--has-menu.transparent) .header__icon .icon
{
    color: white !important;
}

body:has(.header--has-menu.transparent) img.header__heading-logo {
    filter: invert(1) !important;
}

Here is result:

BSSCommerceHDL_2-1717809685895.png
BSSCommerceHDL_2-1717809685895.png1898×875 388 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

Hello, thank you for your time. However, when I tried to paste the code at the bottom of the base.css file nothing changed.

4

Hi @YIVAN ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside it

BSSCommerceHDL_0-1717811116042.png
BSSCommerceHDL_0-1717811116042.png1919×873 121 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

5

Unfortunately, that also did not fix the issue.

header.PNG
header.PNG1878×950 72.3 KB

6

Is there a way to make the mobile header a bit higher.

Screen Shot 2024-06-08 at 9.04.18 PM.png
Screen Shot 2024-06-08 at 9.04.18 PM.png1440×900 146 KB

7

Hi @YIVAN ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Find my code in the theme.liquid file and insert this new code inside the style tag

BSSCommerceHDL_0-1717906099277.png
BSSCommerceHDL_0-1717906099277.png1919×887 225 KB

Code:

@media only screen and (max-width: 767px) {
   body:has(.header--has-menu.transparent) img.header__heading-logo {
     height: 80px;
   }
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
8

Make transparent header:

9

Create transparent header: