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
URL - https://www.agwm.org/previewtopbar/
Thank you
Bill
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.
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
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:
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)
.
No, that is just the max-width that you are seeing (1000px) If you make the browser narrower you will see the padding.
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?
I added padding to your button2 and that seem to work now.
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?
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
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.
PERFECT! Chroma is exactly what I needed!!! Thank you!
I am buying you coffee 
Thank you very much.
Glad it sorted it out for you.
This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.
