After following an online tutorial to create a visually appealing sidebar, I made some adjustments to the code using Bootstrap 4 instead of the tutorial's Bootstrap 3. However, I encountered an issue where the navbar does not stretch to the right as expected. Despite my efforts to improve the layout by hiding certain elements on smaller devices, the design still looks unattractive on medium screens. Although learning Bootstrap from scratch can be challenging, reaching this point in the project fills me with a sense of accomplishment. If you're curious about the visual differences, take a look at the screenshots I've provided:
Large Device - Looks beautiful
Medium Device - What's going on here?
P/S: I admit, the small device screenshot is a bit deceiving. The navbar doesn't stretch properly unless there's enough text to fill its space.