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
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!
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???
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?
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!
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.
