Foundation Topbar stack

(Bill Fleming) #1

How do you keep the padding on left and right of the topbar when it sticky? I added a button to the topbar zone and while it sticky the button is pressed against the edge of the browser

Sitcky seem to strip all margin or padding applied to it


Thank you

(Andrew Tavernor) #2

Just turn on the Contain within Body setting in TopBar. This will limit the contents to your site width.

What you have done is add margins to the generic stacks settings at the top. This will just affect the stacks wrapper divs`. When the TopBar div itself fixes it will no longer be inside these wrappers and so you loose the margins.

(Bill Fleming) #3

I tried the Contain Within Body earlier and what it did was shift all the links to the middle when I have it set to the right.

I republished it with the Contain Within Body enabled

(Robert Ziebol 🖖🏼) #4

Not sure about anyone else, but when TopBar sticks, the button stays where it is at for me:

(Bill Fleming) #5

I found a margin I forgotten about and reset it but the logo shifted over now. I think the Contain Body Within setting put the Topbar to the Site Width setting.

i wanted it to be in the Full Width setting but with a bit of margin on the right and left to prevent the content being pressed against the edge. [quote=“zeebe, post:4, topic:18308, full:true”]
Not sure about anyone else, but when TopBar sticks, the button stays where it is at for me:


(Andrew Tavernor) #6

But it does have padding applied by default and is not hard to the edge with the Contain setting (see the green padding on the screenshot)

(Bill Fleming) #7

I am seeing it differently on my browser. I am seeing lot more padding on mine than what on your

(Andrew Tavernor) #8

No, that is just the max-width that you are seeing (1000px) If you make the browser narrower you will see the padding.

(Bill Fleming) #9

So Contain Within Body make it Site Width then? Not Full site? Is there a way to make it full site with a bit of padding but doesn’t resize when sticky?

(Bill Fleming) #10

I added padding to your button2 and that seem to work now.

(Bill Fleming) #11

After making some changes to few more settings, I managed to get it to look what I was aiming for in Desktop view but it broke mobile hamburger menu.

Any idea why it broke?

(Bill Fleming) #12

Seem that override height break the mobile menu.

What the best way to add padding on the bottom topbar while it overlay the video?

Thank you

(Andrew Tavernor) #13

Looks like your padding has pushed the contents out of the bar for the mobile menu.

You may find it easier to put your Topbar inside a Chroma if you want more control. Set the TopBar to static and fix it with Chroma. You can either use Chroma’s padding controls or even put TopBar inside a padded column or even a BluePrint ONE if you need exact control.

Let Chroma apply the background colur and your bar will sit inside whatever padding you apply for various device sizes.

(Bill Fleming) #14

PERFECT! Chroma is exactly what I needed!!! Thank you!

I am buying you coffee :slight_smile:

(Andrew Tavernor) #15

Thank you very much.

Glad it sorted it out for you.

(system) #16

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.