cruz

Hello @cruz, I have updated the code, please try again. See the attached video to see it in action:
<div class="arrow"> <span> <img class="arrow-img" src="https://images.squarespace-cdn.com/content/6679b55e6ebf2652050ac7b2/bddba3e7-9f37-4a51-bc91-cc79ae1e8bd9/alema1.png?content-type=image/png"> </span> </div> <style> .arrow-img { width: 890px !important; /* Sets the image width to 290px; adjust as needed */ height: auto !important; /* Maintains the image's aspect ratio */ } .arrow span { transform: unset !important; /* Removes any previously applied transformations */ border: none !important; /* Ensures no border is applied to the span */ } </style>
Screen Recording 2024-11-21 at 10.51.22 AM.mov    

To align the items in your desktop burger menu to the top using CSS, you can apply some styling to the menu's container. Here’s a general approach you can take. You might need to adjust the selectors based on your specific HTML structure:
/* Target the burger menu container */
.burger-menu {
    display: flex;                /* Use flexbox for layout */
    flex-direction: column;      /* Stack items vertically */
    align-items: flex-start;     /* Align items to the start (top) */
    position: absolute;          /* Allow positioning without affecting layout */
    top: 0;                      /* Align to the top */
    left: 0;                     /* Adjust left if necessary */
}
/* Target individual menu items */
.burger-menu-item {
    margin: 0;                  /* Remove any default margin */
    padding: 10px 20px;        /* Adjust padding as needed */
}
Implementation Steps:
Inspect the Elements: Use your browser’s developer tools (right-click the menu and select "Inspect") to find the class names of the burger menu and its items. Adjust .burger-menu and .burger-menu-item in the code above to match your actual classes.
Add the CSS: Place the CSS code in your website’s stylesheet. If you have a custom CSS section in your theme settings, you can add it there.
Test Responsiveness: Check the menu on both desktop and mobile views to ensure it looks as intended.
Additional Tips:
If your menu is hidden initially and only displayed on click, ensure that the absolute positioning doesn’t interfere with other page elements. You might need to use media queries if you want different styles for desktop and mobile versions.

Change this code
<div class="arrow"> <span></span> </div> to this
<div class="arrow"> <span><img src="https://images.squarespace-cdn.com/content/6679b55e6ebf2652050ac7b2/bddba3e7-9f37-4a51-bc91-cc79ae1e8bd9/alema1.png?content-type=image/png" width="30px"></span> </div> <style> .arrow span { transform: unset !important; border: none !important; } </style>  

To adjust width on desktop, use this CSS code
@media screen and (min-width:768px) { div.header-menu { width: 30%; } }  

You can use this to Website Tools > Custom CSS
.header-menu-nav-folder-content { justify-content: flex-start !important; }  

You have this CSS code, it make all menu mobile items white color
.header-menu-nav * { color: #fff !important; }