In order to make the animation and styling as shown in the video above, the following steps should be made:
The below styling fixes other problems not only the burger menu styling.
The nav-op class should have padding everywhere except bottom.
The search icon should have only padding-right to not touch directly the hamburger menu icon.
The menu-icon and search-icon elements shouldn't have other paddings.
The "pageTitle" class is already an h1 so no further styling inside is required.
The c-burger-menu class should have the default styling, and only be hidden using the max-width property, similar to the #13 issue.
When adding the c-burger-menu-visible, only the max-width should be modified.
The "white-space: nowrap" makes the texts stay fixed when showing/hiding the hamburger menu. https://developer.mozilla.org/en-US/docs/Web/CSS/white-space for documentation.
On the "c-copyright" class, we don't do padding-top with such big values because devices vary in screen size. This should be done using the margin-top: auto property. https://www.hongkiat.com/blog/css-margin-auto/
Also, position: absolute on the c-exit and c-links shouldn't be done ever. The position: absolute is only used when an element overlays another but in this case both classes should be inserted as "real" elements with their default position
In the JS file, the exitMenu function should "remove" the visible class. This can be done with the classList.remove() function.
Also, the opposite is done in the "displayBurgerMenu" function. This should add the "c-burger-menu-visible" class.
Also, please don't ever use .innerHTML on an element to add another element as a string inside of it as below.
This was the previous code and was seen in the "DOM inspector" as an
https://github.com/Stellar-Junior-Dev/cocktailMasters-cosmin/assets/36665504/6cb10961-6f6b-4883-aaf3-b1391c2d76f3
In order to make the animation and styling as shown in the video above, the following steps should be made:
The below styling fixes other problems not only the burger menu styling.
The nav-op class should have padding everywhere except bottom.
The search icon should have only padding-right to not touch directly the hamburger menu icon.
The menu-icon and search-icon elements shouldn't have other paddings.
The "pageTitle" class is already an h1 so no further styling inside is required.
The c-burger-menu class should have the default styling, and only be hidden using the max-width property, similar to the #13 issue.
When adding the c-burger-menu-visible, only the max-width should be modified.
The "white-space: nowrap" makes the texts stay fixed when showing/hiding the hamburger menu. https://developer.mozilla.org/en-US/docs/Web/CSS/white-space for documentation.
On the "c-copyright" class, we don't do padding-top with such big values because devices vary in screen size. This should be done using the margin-top: auto property. https://www.hongkiat.com/blog/css-margin-auto/
Also, position: absolute on the c-exit and c-links shouldn't be done ever. The position: absolute is only used when an element overlays another but in this case both classes should be inserted as "real" elements with their default position
In the JS file, the exitMenu function should "remove" the visible class. This can be done with the classList.remove() function. Also, the opposite is done in the "displayBurgerMenu" function. This should add the "c-burger-menu-visible" class.
Also, please don't ever use .innerHTML on an element to add another element as a string inside of it as below.
This was the previous code and was seen in the "DOM inspector" as an
that has inside another
element. Use this as a rule of thumb.