Read Me

The examples in this project are "worst case scenario examples where you need to use 4 separate TBS stacks -

One each to control the unstuck and stuck states of a sticky top bar

and

Another 2 to over ride animation and bar size settings for the mobile menu


If you do not require a state change when TopBar sticks in sticky mode you will only need one TBS stack in most cases

If you are only styling one state then you don't need to change the Apply to State setting to fixed - even if you have a fixed topper. Due to inheritance, the fixed topper will inherit all the default (non fixed settings.) This control is only needed when you need to generate separate CSS for the fixed state as compared to the non fixed state.


The same principle apples to the Breakpoint control

Generally it is only necessary to apply separate override styles if you have applied a transition or a bar height override - these are incompatible with the mobile menu in Foundation and so must be over ridden with a TBS stack with them turned off

Make Life Easy for Yourself

Get your styling sorted for the desktop mode, and then simply copy and paste that TBSMenu stack and just alter the things you need to for either the fixed or the mobile mode

Please read the Instructions document section on styling Two State TopBars

STYLING MULTIPLE BAR STATES (STICKY OPERATION)
USING TWO TBS STACKS FOR STICKY TOPBARS

Exactly the same principles apply when over riding the mobile menu separately as well

Dont Forget to Make Use of User Stacks

If you have 4 TBSMenu stacks per page, like in these examples, just throw them into a 1 column stack (or any other container type stack) - create a user stack from it and just drop that one user stack onto each page.

You dont have to leave TBSMenu Stacks in your project

Remember - you don't need to leave any TBSMenu Stacks in your project at all - just follow the instructions for extracting your generated CSS and add it to the RW site wide CSS. That way you can just use TBS as a CSS Generator.

Infant - why not just style your TopBar on a dummy page in your project. Extract the CSS and apply it site-wide and then set that "styling" page to not be published. That way you have a TopBar designer page to come back to but a much simpler project structure