[Share] Add a dropdown next to header button

If it doesn't work, you can send link to your site + exact code you added, I will check again.

To add a dropdown next to header button, you can follow these.

#1. You can add a dropdown to Main Navigation

You can place any texts in Name, but in URL, use this URL: /button-dropdown

#2. 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(){
    $('div.header-display-desktop div.header-nav-item:has(a[href="/button-dropdown"])').insertAfter('.header-display-desktop a.btn');
});
</script>
<style>
.header-actions--right .header-actions-action {
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-actions--right .header-actions-action a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
}
.header-actions--right .header-actions-action .header-nav-folder-content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    opacity: 0;
}
.header-actions--right .header-actions-action div.header-nav-item {
    position: relative;
    right: -20px;
}
.header-actions--right .header-actions-action div.header-nav-item:hover .header-nav-folder-content {
    opacity: 1;
}
</style>

#3. Result

#4.1. If you want to move Dropdown before Header Button, just change this to

insertBefore

#4.2. If you want to change Dropdown Title to button, use this code before </style>

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

Result

Hi! @tuanphan! I love your shares and your replies have helped me so much with my sites.

I'm designing a site for an author and looking for a way to create a dropdown "buy now" button in my intro section, that will link to the different places someone can buy their book. Similar to the "Buy the book" button on this site.

Would this code also work for this? Can you share how to update the code to target a button in a specific section?

25 minutes ago, helloluci said:

Hi! @tuanphan! I love your shares and your replies have helped me so much with my sites.

I'm designing a site for an author and looking for a way to create a dropdown "buy now" button in my intro section, that will link to the different places someone can buy their book. Similar to the "Buy the book" button on this site.

Would this code also work for this? Can you share how to update the code to target a button in a specific section?

Follow this