Sticky navbar with container being shifted slightly to the left upon modal opened
Created by: valerie-makes
Link to demo: https://jsfiddle.net/techdavid/g89ts0rs/1/
When opening a modal, where the page contains a sticky navbar with a container inside it, the container gets shifted slightly to the left due to the padding being applied to the body element.
The .sticky-top element gets a right-padding of 33px added, however there is also white space to the right of this due to the padding on the body. The .sticky-top element should also have a margin-right of -33px applied to compensate for this.
I think that when PR #18441 was submitted, it maybe wasn't tested with .sticky-top (only .fixed-top) and so this is why the problem is still sometimes occurring. I checked the source of the JS file I'm using and found that it does contain code from this PR.
Edit: checked to confirm the problem is only occurring with sticky-top (not fixed-top).
Before opening an issue:
- Search for duplicate or closed issues => supposedly fixed in #18441 but still broken in the latest beta
- Validate and lint any HTML to avoid common problems => done
- Prepare a reduced test case for any bugs => https://jsfiddle.net/techdavid/g89ts0rs/1/
- Read the contributing guidelines => done
When asking general "how to" questions:
- Please do not open an issue here
- Instead, ask for help on StackOverflow, IRC, or Slack
When reporting a bug, include:
- Operating system and version => Windows 10
- Browser and version => Chrome 60
- Reduced test cases and potential fixes using JS Bin => https://jsfiddle.net/techdavid/g89ts0rs/1/
When suggesting a feature, include:
- As much detail as possible for what we should add and why it's important to Bootstrap
- Relevant links to prior art, screenshots, or live demos whenever possible