I've created a navbar by following Bootstrap's tutorial, but I'm facing an issue with the padding. I used the Bootstrap class "pe-5" to add padding to a form within the navbar so that it aligns to the right with some space from the screen edge. However, when I collapse the button, the padding remains and looks off.
Is there a way to adjust the CSS for collapsed items? I've tried various methods, like changing the padding values when the collapse is shown:
#navbarCollapse.navbar-collapse.collapse.show #top-search-form {
padding-left: 0rem;
padding-right: 0rem;
}
But nothing seems to work. Changing margins causes a jump during animation, and adjusting padding directly doesn't have any impact. I also experimented with JavaScript, adding event listeners for showing and hiding the collapsible button to remove the padding class, but it got messy.
I encountered issues with the element still being considered collapsed even when hidden, leading me to believe there must be a simpler solution out there. Here's a demo showcasing the problem:
https://jsfiddle.net/jbu812os/
If you shrink the screen until the collapse hamburger button appears, clicking it will reveal that the search box and button don't expand to full width in the collapsed state.
I would greatly appreciate any assistance or guidance on how to resolve this. Thank you!