Header Transparency & Stickiness Mobile Bug

motiveworkshop
(@motiveworkshop)

3 years, 6 months ago
The header transparency and stickiness options for mobile are broken in this theme’s CSS configuration files. I’ve already tried all of the previously posted workarounds on these forums to no effect. I need the desktop, tablet and mobile header transparency and stickiness options to be synchronized.

The website currently has the following code added to the Additional CSS section of the theme customization options without any results whatsoever:
```
.sticky-header-active .mobile-header {
  position: -webkit-sticky
!important; /* Safari */
  position: sticky !important;
	top: 0;
}

@media only screen and (max-width: 1024px) {
  body.sticky-header-active.botiga-scrolling-down .mobile-header {
    position: -webkit-sticky !important; /* Safari */
    position: sticky !important;
  }  
}
```
Could I please have the details of any specific CSS / PHP files in the theme which need modification to correct this bug, and the code modifications required to do so? Given this bug is years old now, a theme update with these bugs fixed is badly needed.

Thank you in advance for your time and assistance!

The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

Kharis Sulistiyono
(@kharisblank)

3 years, 6 months ago
Hi,

Can you try replacing your custom CSS code with this one?
```
@media only screen and (max-width: 1024px) {
  body.sticky-header-active.botiga-scrolling-down .bhfb-mobile {
    position: fixed !important;
  }  
}
```
Please give it a try and let me know your views. Don’t forget to clear any cache once the new code changes applied.
Thread Starter motiveworkshop
(@motiveworkshop)

3 years, 6 months ago
Thank you for the prompt reply Kharis.

Changing “.mobile-header” to “.bhfb-mobile” and using the “fixed” position instead of “sticky” has actually referenced the proper element and made it stick. The header wasn’t sized correctly, and would disappear on scrolling up, so I’ve modified your code as follows:
```
@media only screen and (max-width: 1024px) {
  body.sticky-header-active.botiga-scrolling-down .bhfb-mobile {
    position: fixed !important;
		width: 100%;
    z-index: 100;
		top: 0;
  } 
}
@media only screen and (max-width: 1024px) {
  body.sticky-header-active.botiga-scrolling-up .bhfb-mobile {
    position: fixed !important;
		width: 100%;
    z-index: 100;
		top: 0;
  } 
}
```
That solves the mobile device sticky header issue.

What CSS code is required to make the mobile header inherit the same transparency as the desktop header before scrolling?
Kharis Sulistiyono
(@kharisblank)

3 years, 6 months ago
Hi @motiveworkshop,

Thank you for getting back!

> That solves the mobile device sticky header issue.

Glad to know you got better solution for your need.

> What CSS code is required to make the mobile header inherit the same transparency as the desktop header before scrolling?

Try adding this CSS code:
```
body:not(.sticky-header-active) .bhfb-main_header_row {
  background-color: transparent;
}
```

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Header Transparency & Stickiness Mobile Bug’ is closed to new replies.