Skip to content

Conversation

@prosdev
Copy link
Contributor

@prosdev prosdev commented Dec 27, 2025

Summary

Add optional pushDown config to banner plugin that allows top banners to smoothly push page content down (add margin-top) instead of overlaying it.

Changes

  • Add pushDown?: string to BannerPluginConfig
  • Implement applyPushDown() and removePushDown() helper functions
  • Apply margin-top to target element when top banner is shown
  • Remove margin-top when banner is dismissed
  • Update JSDoc with usage examples

Usage

init({
  banner: {
    position: 'top',
    pushDown: 'header' // CSS selector of element to push down
  }
});

Benefits

  • Opt-in feature (default behavior unchanged)
  • Smooth transition with CSS animations
  • Improves UX for sticky navigation
  • Automatically removes margin when banner is dismissed
  • Backward compatible

Testing

  • Manually tested with various selectors
  • Works with sticky navigation headers
  • Gracefully handles invalid selectors

- Fix layout with proper flexbox structure
- Update to cleaner color scheme (white bg, better contrast)
- Improve spacing and typography
- Better dark mode support
- More professional button styles
- Responsive mobile layout improvements
Add optional pushDown config to banner plugin that allows top banners
to smoothly push page content down (add margin-top) instead of overlaying.

Usage:
init({
  banner: {
    position: 'top',
    pushDown: 'header' // CSS selector
  }
});

- Opt-in feature (default behavior unchanged)
- Smooth transition with CSS animations
- Automatically removes margin when dismissed
@prosdev prosdev merged commit df2c286 into main Dec 27, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants