agtravis
commented
4 years ago FYI @twopcz This is essentially a different nav that displays and is hidden alternately with the left nav. The IDs are different, but when an event listener is applied and the event is triggered, the same function is called. I have not attached a new event listener to your Nutrition button, so here is how it looks in the HTML:
<button class="btn" id="nutrition-test-buttonSM">Nutrition</button>.
Also @ariehh1 I did change some CSS, review through the commit history to see, but basically I had to define a height for the header to stop it interacting with the top nav, and the modal I changed to fixed positioning and positioned it centrally with an offset - so if you change the size of the modal div or add padding/margin etc. you'll need to account for that with the offset. This is because when you position an item it positions the top left corner of the item, not the dead center of the item, so the offset is always half the height & width. Thinking about it, I did not factor in border/margin/padding, so will likely need to adjust anyway! But you get the idea.
I also moved the HTML of the modal from being a child of the main information container to being a child of the body. Since it is positioned fixed, it is only dependent on the screen size anyway, but being a child of that container meant its visibility was depended on the state of the parent, and wouldn't therefore display on a small screen.
Let me know if you see any bugs, I have tested enough to feel comfortable making a pull req.
Have a good Sunday gents.
Check it out on a small screen!
Next up, I'll get the liquor cabinet to display with inventory. Thinking I'll probably shrink the images, and make the div the width of the screen (with some margin) and user will scroll left and right to see more products