[Share] Add a Dropdown to Announcement Bar

If it doesn't work, you can send site url, I will check again.

To add a dropdown to announcement bar, you can follow these steps.

#1. First, you need to enable Announcement Bar.

#2. Next, you can add a dropdown to Main Navigation

#3. You can place any texts in Name, but in URL, use this URL: /ann-dropdown

#4. Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  setTimeout(function(){
            $('div.header-display-desktop div.header-nav-item:has(a[href="/ann-dropdown"])').appendTo('div#announcement-bar-text-inner-id');
         }, 2000);
});
</script>
<style>
div#announcement-bar-text-inner-id {
    display: flex;
    justify-content: center;
    align-items: center;
}
div#announcement-bar-text-inner-id a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
}
div#announcement-bar-text-inner-id .header-nav-folder-content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    opacity: 0;
      min-width: 200px;
}
div#announcement-bar-text-inner-id div.header-nav-item {
    position: relative;
    right: -20px;
}
div#announcement-bar-text-inner-id div.header-nav-item:hover .header-nav-folder-content {
    opacity: 1;
}
  .sqs-announcement-bar-dropzone {
    z-index: 9999999999 !important;
}
  div#announcement-bar-text-inner-id div.header-nav-folder-content a {
    color: #000;
}
</style>

#5. Result

#6. To remove underline + turn dropdown to button, use this code before </style>

div.header-nav-item a[href="/ann-dropdown"] {
    background-color: #000;
    color: #fff;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none !important;
}

Result