Currently, I am working on a website project that utilizes Bootstrap. On the right side of the page, there is a column containing a search module and various other elements. However, this column is hidden on smaller screens. I am looking to bring back only the search module (while hiding everything else except for the footer) by clicking a button that appears in the menu.
Although it seemed like a simple task, I have been struggling to override the hidden status of the column. I have attempted setting the visibility both in the stylesheet and directly on the div itself using d-none d-lg-block, but to no avail.
Upon clicking the button using the code below, the main container disappears (sometimes requiring two clicks), but the sidebar does not reappear - which, based on my numerous attempts, seems to be intended behavior, but not what I am aiming for.
After receiving a helpful comment confirming that this was beyond the scope of Bootstrap, I decided to update the code to utilize JavaScript for handling the activation of the search module and hiding the main content. A simple function was only one-way, so I also implemented the hiding of the search button upon clicking and displaying a close button to reverse the actions. Additionally, I added a third function to reset everything in case the page width changes. This functionality is specifically designed for smaller screens or mobile devices, and it resets the visibility of impacted divs if the page width increases after any button actions. While it is currently working in testing, I am open to feedback, tips, and suggestions to further enhance it.
A big thank you to everyone who has contributed to helping me reach this point!
/* Your CSS code here */
/* Your HTML code here */