ECLIP3S Posted May 13, 2020 Share Posted May 13, 2020 How would I go about making the navigation bar on my website sticky/frozen. Link to comment Share on other sites More sharing options...
bfarber Posted May 13, 2020 Share Posted May 13, 2020 Edit the element in the templates and add data-ipsSticky to it Link to comment Share on other sites More sharing options...
CoffeeCake Posted May 15, 2020 Share Posted May 15, 2020 @bfarber: Thank you for this! This works wonderfully at larger viewports, however would be better if it did not apply to mobile/tablet viewports. How can this be done for large viewports only? For example, when mobileNav appears, remove the data-ipsSticky element from ipsLayout_header? Link to comment Share on other sites More sharing options...
bfarber Posted May 15, 2020 Share Posted May 15, 2020 Using data-ipsSticky-disableIn='phone' on the element should disable it for mobile devices, however this should already be the default. Link to comment Share on other sites More sharing options...
CoffeeCake Posted May 15, 2020 Share Posted May 15, 2020 (edited) @bfarber: Ah! So close! Is there a way to specify to disable for tablet AND phone? (In other words, only be sticky on the desktop viewport). Edited May 17, 2020 by Paul E. Clarify Link to comment Share on other sites More sharing options...
CoffeeCake Posted May 17, 2020 Share Posted May 17, 2020 I tried adding two strings to the data-ipSticky-disableIn element, yet no go. ='phone,tablet' or ='phone tablet'... but nopes. 😞 I suppose there's not an enableIn equivalent that I could just specify 'desktop'? Link to comment Share on other sites More sharing options...
Morrigan Posted May 17, 2020 Share Posted May 17, 2020 It looks like you're spelling it wrong. Its ipsSticky not ipSticky: Link to comment Share on other sites More sharing options...
CoffeeCake Posted May 17, 2020 Share Posted May 17, 2020 Thanks, @Morrigan. That was a typo here, but in my theme I had it spelled correctly. I dug into the javascript library after posting and saw that there is a split on commas, so the correct syntax (for anyone else wanting to do the same) is data-ipsSticky-disableIn='phone,tablet'. After trying that and doing a hard refresh (CTRL + F5), I had the desired result. Thanks @bfarber! bfarber and Meddysong 2 Link to comment Share on other sites More sharing options...
CoffeeCake Posted June 16, 2020 Share Posted June 16, 2020 So, reporting back on this. Some issues. While I managed to get the desired result, there are two places that issues remain: dialog boxes that "pop up" are covered by the sticky header (for example, sending warnings to a user, or private message notifications. These either need to have a higher z-index, or be pushed further down the page. anchored links (jumping to a specific post halfway down a thread, for example) are covered up by the header. Are there solutions for these side-effects that can be implemented? Link to comment Share on other sites More sharing options...
Recommended Posts