the heading text still have same problem, and the dropdown menu box must come on top of the button not under

index.html

@@ -56,6 +56,8 @@
             background: transparent !important;
             border: none !important;
             outline: none !important;
+            z-index: 10;
+            position: relative;
         }
 .social-dropdown {
             display: none;
@@ -69,10 +71,10 @@
             max-height: 200px;
             overflow-y: auto;
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-            top: 100%;
+            bottom: 100%;
             left: 50%;
             transform: translateX(-50%);
-            margin-top: 8px;
+            margin-bottom: 8px;
         }
 .social-option {
             display: flex;
@@ -268,7 +270,6 @@
                 document.getElementById('socialDropdown').style.display = 'none';
             });
         });
-
         // Initialize placeholder functionality
         document.querySelectorAll('.editable').forEach(editable => {
             // Clear placeholder text when focusing
@@ -287,6 +288,14 @@
                 this.style.background = 'transparent';
             });
         });
+
+        // Fix for heading text visibility
+        document.getElementById('editableName').addEventListener('focus', function() {
+            this.style.zIndex = '20';
+        });
+        document.getElementById('editableName').addEventListener('blur', function() {
+            this.style.zIndex = '10';
+        });
 function addSocialIcon(platform, handle) {
             const container = document.getElementById('socialIconsContainer');
             const icon = document.createElement('a');