This PR standardizes header markup and refactors the related styles to fix the overlapping elements shown here:
"Refactoring" in this case means moving the header styles into one continuous block in styles.css for the CSS, and modifying the markup and styles so that flexbox can handle the layout, which makes explicit margins/padding/positioning unnecessary. All pages should have the fixes.
Note: I only did what was necessary to fix the overlapping issue, and I made guesses about what content is intended for the header on each page. After @ArthurSmid checks that the content of each header is correct, I'll make any required changes there.
Also, on pages that have the three select menus (ex. category.html), the header doesn't collapse at browser widths between the 1056px breakpoint, and about 1325px. We'll need a solution for that - maybe moving the select menus out of the header, to the top of the page body? Let's discuss and I'll make the necessary changes pre-merge.
This PR standardizes header markup and refactors the related styles to fix the overlapping elements shown here:
"Refactoring" in this case means moving the header styles into one continuous block in
styles.cssfor the CSS, and modifying the markup and styles so that flexbox can handle the layout, which makes explicit margins/padding/positioning unnecessary. All pages should have the fixes.Note: I only did what was necessary to fix the overlapping issue, and I made guesses about what content is intended for the header on each page. After @ArthurSmid checks that the content of each header is correct, I'll make any required changes there.
Also, on pages that have the three select menus (ex.
category.html), the header doesn't collapse at browser widths between the 1056px breakpoint, and about 1325px. We'll need a solution for that - maybe moving the select menus out of the header, to the top of the page body? Let's discuss and I'll make the necessary changes pre-merge.