Freezing the breadcrumbs proxy position in a sidenav site

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
AlanKearns
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

Freezing the breadcrumbs proxy position in a sidenav site

Post by AlanKearns »

The breadcrumbs proxy is at the top of the masterpage, putting it as a shaded box at the top of each topic. So it scrolls off screen in long topics. What CSS could I use to freeze it, so it behaves like a non-scrolling topic header?
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Freezing the breadcrumbs proxy position in a sidenav sit

Post by NorthEast »

These days you can use CSS position: sticky - which makes the element stick to its original position when you scroll down the page.
https://www.w3schools.com/howto/howto_c ... lement.asp

You could put the breadcrumbs proxy inside a div, then add CSS for the div that sets position: sticky and whatever other styling you need.
AlanKearns
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

Re: Freezing the breadcrumbs proxy position in a sidenav sit

Post by AlanKearns »

Thank you - I shall try that tomorrow!
AlanKearns
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

Re: Freezing the breadcrumbs proxy position in a sidenav sit

Post by AlanKearns »

Wierdly, it only works when the site is full-size; when the window width is shrunk so that the responsiveness kicks in, the breadcrumbs go back to scrolling.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Freezing the breadcrumbs proxy position in a sidenav sit

Post by NorthEast »

Yep, sorry I use CSS sticky myself, but found it doesn't work in Flare's responsive tablet/mobile modes - but it wasn't a problem for me, as I didn't need it in the responsive modes.

The long answer is that it happens because CSS sticky doesn't work when any parent elements use these specific overflow properties - and unfortunately, Flare uses them a lot in its responsive output:
overflow: hidden
overflow: scroll
overflow: auto

Another method is to use the Foundation sticky component that's built-in to Flare's output, and used by Flare itself.
It'll require some reading and experimentation, but basically using the Foundation sticky styles described here should work in HTML5 outputs:
https://get.foundation/sites/docs/sticky.html
AlanKearns
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

Re: Freezing the breadcrumbs proxy position in a sidenav sit

Post by AlanKearns »

Thanks for that info - maybe mobile devices shouldn't have immovable blocks of navigation elements anyway!
Post Reply