Apologizies if this is obvious. All quite new to me. I’ve built a Top Bar Menu on the top of a site I’m working on with Sticky turned on. Before I start scrolling there is extra padding on either side of the menu. Once I start scrolling the pad goes away. Can’t seem to figure this behavior out. I’d like to lose the padding from the opening state.
Hi @adman17
You may want to change the title of your question to “Top Bar question” as “Top Box” is a different stack by a different developer.
I’m sure one of the many Foundation guys will be on the scene in no time to help with the navigation…
The padding either side is most likely because you have TopBar in a 1-col stack. When it fixes (sticks) it will go full width.
In addition you want it to always to be at the top then used the Fixed setting rather than the Sticky setting.
You don’t say which state you want it to adopt but here are the options:
Always Contained to site width
To contain a fixed TopBar to the site width you have two options:
- Place the whole page, including TopBar into a Floating Body stack - everything will be contained to the site width including TopBar
- Use the Pin Stack to fix TopBar - this can retain the padding from the column when it fixes and so it won’t jump to full width. This is more convenient and flexible approach as it doesn’t limit you to having the entire page within a Floating Body stack. Pin will do this in both sticky and fixed mode - see the demo pages from that link.
Always Full Width
This is the easy option - simply don’t place your TopBar inside a 1-col stack, just put it directly onto the page.
1 Like
Thanks Andrew. Your Always Full Width option is what I was looking for! I appreciate the help.
Sorry to all for the incorrect header question but it looks like someone has fixed my mistake.
1 Like