Menu icon Foundation
Top bar fixed only on small

Hello, im wondering how to use fixed top bar but only on small breakpoint. on medium and up it should behave as normal menu, placed along with content.

Do you know how to do this using foundation components ? Maybe there is simple work-around ?

topbarsmallfixed

Hello, im wondering how to use fixed top bar but only on small breakpoint. on medium and up it should behave as normal menu, placed along with content.

Do you know how to do this using foundation components ? Maybe there is simple work-around ?

Samuel Kelemen over 5 years ago

I would use two different menu. Use the class="show-for-small-only" visibility class for the small pages, and class="show-for-medium-up" for your normal menu

Andrzej Kaźmierczak over 5 years ago

Hello, this is exact solution im using now, but i think it's a little workaround, because it creates same HTML content 2 times.

I like the "sticky" class for topbar and i think simmilar solution should be used for "fixed". maybe in next update ;)

thanks for your reply anyway ;) if someone other knows better solution, feel free to post it here.

greetings !

Samuel Kelemen over 5 years ago

Oops, you we right.
you should be able to put it in a div and set the class to fixed

<div class="fixed">

I don't see the

<div class="fixed_on: small">

though. it looks like you might only be able to do the _on: thing with sticky.
I didnt test it though, so it might work.

If it doesn't, I would totally agree that this should be added in the next update.