Invision Community 4: SEO, prepare for v5 and dormant account notifications By Matt Monday at 02:04 PM
Omri Amos Posted October 22 Posted October 22 (not sure if this is considered a "bug" or just a needed custom modifications) When using a custom header and footer with HTML content that occupies extra space, the mobile menus don't account for this additional height. The .ipsOffCanvas__panel class uses position:fixed and top:0, which causes it to overlap with the custom header. While I was able to resolve this by adjusting the top value to 85px in custom CSS, since custom headers are a built-in feature rather than a theme modification, perhaps the default theme behavior should automatically account for this extra space? Alternatively, because of some features with the scrolling behavior, if keeping top:0 is preferred, the menu should at least appear above the custom header. Currently, the custom header obscures the menu - an issue I resolved by adding z-index:110 to .ipsOffCanvas. Another issue occurs when clicking any of the mobile footer options: the opened menu displays with unnecessary bottom spacing equal to the mobile footer menu's height, while the actual footer menu disappears, leaving empty space. This appears to be connected to my custom header/footer implementation, as the default theme works fine without it - though I'm puzzled about how, since my custom CSS doesn't directly interact with the .ipsMobileFooter class or any of the other IPS elements. Changing .ipsMobileFooter from position:sticky to position:fixed resolved this issue. I'm not entirely clear on the difference between fixed and sticky positioning, but 'fixed' fixed it! 😉
Recommended Posts