Help With Sticky Header On Mobile Device- Esports Template - Question | JoomShaper
Back to the questions

Help With Sticky Header On Mobile Device- Esports Template

T

trey-braid

Template 2 years ago

URL - https://xtreme-traction.com/AIF/

I've added a custom header to give me 2 mod positions above the header (mainmenu and secondarymenu with logo in the middle.)

Can you take a look at the site on a mobile device and help me fix the header; so, its sticky to the top of the screen.

Do I need to add the #sp-header {position:fixed!important;} to a media query???? I've commented that out in my custom.css to enable me to add the 2 mod positions above the custom header.

Thanks Trey

0
5 Answers
Order by
Oldest Newest Votes
Muntasir Sakib
Muntasir Sakib
Accepted Answer
Support Agent 2 years ago #21510

Hello there,

Yes, you need to add that custom CSS code. As I can see for now it is disabled, please enable it and your issue will be gone.

Thanks!

0
T
trey-braid
Accepted Answer
2 years ago #21511

Muntasir, if I add that CSS back to the custom.css file then the 2 mods that I've added above the custom header will be covered up. Did you look at the site on a mobile device? along with a computer?

Should I add it to a media query instead???

0
T
trey-braid
Accepted Answer
2 years ago #21531

Muntasir, Ok I've added the CSS back to the custom.css file, now the 2 mods I have added to my custom header are being covered up by the header.

What CSS can I add so they appear above the header?

0
Muntasir Sakib
Muntasir Sakib
Accepted Answer
Support Agent 2 years ago #21615

Hello there,

Please add the following code inside custom CSS.

@media (max-width: 767px){
  #sp-header{
    position: fixed !important;
  }
}

It will fix the issue.

Thanks!

0
Pavel
Pavel
Accepted Answer
2 years ago #21627

Hi @trey-braid. You generally have not done correctly. You need to remake it. For example, your mobile menu is not working now. The reason for this is the duplication of elements with the same ID. This is not permissible, even if the element is hidden. The ID must be unique.

There is no need to hide one Header and display another Header for mobile devices. Everything can be done with the only Header via CSS.

And this in any case is not a solution.

@media (max-width: 767px){
  #sp-header{
    position: fixed !important;
  }
}

Header already has position:fixed after scrolling out of the box if the Sticky Header option is enabled. Delete it from your code. It is not correct, and only harms. Since your League-Header section is hidden under Header.

0