Freezing the breadcrumbs proxy position in a sidenav site
-
- Sr. Propeller Head
- Posts: 103
- Joined: Thu Sep 11, 2014 2:06 am
Freezing the breadcrumbs proxy position in a sidenav site
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?
Re: Freezing the breadcrumbs proxy position in a sidenav sit
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.
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.
-
- Sr. Propeller Head
- Posts: 103
- Joined: Thu Sep 11, 2014 2:06 am
Re: Freezing the breadcrumbs proxy position in a sidenav sit
Thank you - I shall try that tomorrow!
-
- Sr. Propeller Head
- Posts: 103
- Joined: Thu Sep 11, 2014 2:06 am
Re: Freezing the breadcrumbs proxy position in a sidenav sit
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.
Re: Freezing the breadcrumbs proxy position in a sidenav sit
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
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
-
- Sr. Propeller Head
- Posts: 103
- Joined: Thu Sep 11, 2014 2:06 am
Re: Freezing the breadcrumbs proxy position in a sidenav sit
Thanks for that info - maybe mobile devices shouldn't have immovable blocks of navigation elements anyway!