+
-
+
diff --git a/public/products.html b/public/products.html
index d139800..a84319a 100644
--- a/public/products.html
+++ b/public/products.html
@@ -7,30 +7,30 @@
Document
-
-
-
-
-
+
+
+
+
+
diff --git a/public/style.css b/public/style.css
index f84e9b4..31ad766 100644
--- a/public/style.css
+++ b/public/style.css
@@ -727,6 +727,10 @@ video {
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
+.overflow-hidden{
+ overflow: hidden;
+}
+
.rounded{
border-radius: 0.25rem;
}
@@ -978,27 +982,41 @@ video {
margin: 2rem 0;
}
-@media only screen and (max-width:768px) {
- nav ul{
+@media only screen and (max-width:920px) {
+ nav{
+ flex-direction: column;
+ position: relative;
+ }
+
+ nav #menu{
+ display: block;
position: absolute;
- top: 50px;
- padding: 10px 0px 10px 50px;
- left: -8%;
- /* text-align: center; */
- min-width: 1000px;
- background-color: #f4f0ff;
+ top: 0px;
+ right: 5px;
}
-}
-@media only screen and (max-width:860px) {
nav ul{
- position: absolute;
- top: 50px;
- padding: 10px 0px 10px 50px;
- left: -8%;
- /* text-align: center; */
- min-width: 1000px;
- background-color: #f4f0ff;
+ background-color: rgb(255, 255, 255);
+ display: none;
+ }
+
+ nav ul li{
+ display: block;
+ padding: 2% 0;
+ }
+
+ .showmenu{
+ display: block;
+ width: 100%;
+ margin-top: 5%;
+ }
+
+ nav ul li a{
+ color: #222;
+ }
+
+ nav ul li:hover{
+ color: white;
}
}
@@ -1165,4 +1183,4 @@ video {
--tw-text-opacity: 1;
color: rgb(23 37 84 / var(--tw-text-opacity));
}
-}
\ No newline at end of file
+}
diff --git a/public/style.js b/public/style.js
index 27c8064..e7cbc98 100644
--- a/public/style.js
+++ b/public/style.js
@@ -9,7 +9,7 @@ const decreaseNum = () => {
}
};
document.querySelector("#menu").addEventListener("click", () => {
- document.querySelector("li, ul").classList.toggle("hidden");
+ document.querySelector("li, ul").classList.toggle("showmenu");
});
const AddtoCart = document.querySelectorAll(".add_to_cart");
diff --git a/src/input.css b/src/input.css
index 127bd6e..1035b3f 100644
--- a/src/input.css
+++ b/src/input.css
@@ -15,27 +15,38 @@
.cart_item:nth-child(2n){
margin: 2rem 0;
}
-@media only screen and (max-width:768px) {
- nav ul{
+@media only screen and (max-width:920px) {
+ nav{
+ flex-direction: column;
+ position: relative;
+ }
+ nav #menu{
+ display: block;
position: absolute;
- top: 50px;
- padding: 10px 0px 10px 50px;
- left: -8%;
- /* text-align: center; */
- min-width: 96.5vw;
- background-color: #f4f0ff;
+ top: 0px;
+ right: 5px;
}
-
-}
-@media only screen and (max-width:860px) {
nav ul{
- position: absolute;
- top: 50px;
- padding: 10px 0px 10px 50px;
- left: -8%;
- /* text-align: center; */
- min-width: 96.5vw;
- background-color: #f4f0ff;
+ background-color: rgb(255, 255, 255);
+ display: none;
+
+
}
+ nav ul li{
+ display: block;
+ padding: 2% 0;
-}
\ No newline at end of file
+ }
+ .showmenu{
+ display: block;
+ width: 100%;
+ margin-top: 5%;
+ }
+ nav ul li a{
+ color: #222;
+ }
+ nav ul li:hover{
+ color: white;
+ }
+
+}