@@ -61,14 +61,13 @@ const displayMobileMenu = () => {
61
61
</script >
62
62
63
63
<style scoped>
64
- /* Mobile menu positioning */
64
+
65
65
.mobile-menu {
66
66
top : 0 ;
67
- bottom : 80px ; /* Adjust this value to match your footer height */
68
- max-height : calc (100vh - 80px ); /* Adjust this value to match your footer height */
67
+ bottom : 80px ;
68
+ max-height : calc (100vh - 80px );
69
69
}
70
70
71
- /* Style for mobile menu links */
72
71
.linkStyle {
73
72
@apply w-auto p- 4 m- 4 font-bold text-center border border-gray- 300 border-opacity- 50 shadow-md rounded ;
74
73
}
@@ -77,25 +76,26 @@ const displayMobileMenu = () => {
77
76
@apply w-auto p- 4 m- 4 font-bold text-center ;
78
77
}
79
78
80
- /* Main hamburger styling */
81
79
.burger {
82
80
height : 3em ;
83
81
width : 3em ;
84
82
position : relative ;
85
83
font-size : 14px ;
86
84
cursor : pointer ;
87
85
transition : 0.5s all ;
88
-
89
86
-webkit-tap-highlight-color : transparent ;
90
87
}
88
+
91
89
.burger .burger-lines :after {
92
90
left : 0 ;
93
91
top : -1em ;
94
92
}
93
+
95
94
.burger .burger-lines :before {
96
95
left : 1em ;
97
96
top : 1em ;
98
97
}
98
+
99
99
.burger :after {
100
100
content : " " ;
101
101
display : block ;
@@ -105,10 +105,12 @@ const displayMobileMenu = () => {
105
105
top : -25% ;
106
106
left : -25% ;
107
107
}
108
+
108
109
.burger .burger-lines {
109
110
top : 50% ;
110
111
margin-top : -0.125em ;
111
112
}
113
+
112
114
.burger .burger-lines ,
113
115
.burger .burger-lines :after ,
114
116
.burger .burger-lines :before {
@@ -123,7 +125,6 @@ const displayMobileMenu = () => {
123
125
transform : rotate (0 );
124
126
}
125
127
126
- /* Burger animations classes */
127
128
.burger.burger-squeeze .burger-lines ,
128
129
.burger.burger-squeeze .burger-lines :after ,
129
130
.burger.burger-squeeze .burger-lines :before {
0 commit comments