Custom nav bar

Hi, 

Does anyone know how can i can create a hamburger menu on desktop that displays to the size (horizontal) when the client clicks on the icon.

Heres an example

https://codepen.io/Zorlimar/pen/vgZaox

Thank you!!

Hi,

Some templates in SS 7.0 supports this. If you use SS7.0, you can change template

With 7.1, we can replace Default Header with Codepen Header.

If you share link to your site, we can test code easier

Hi,

Thank you so much! te link is https://semicircle-blueberry-y3ax.squarespace.com/config/ and password christine123

Im trying to create a hamburger menu that display horizontally only on desktop instead of taking the whole page. 

Also, sorry to bother you but do you know if its possible to add this type of animation in sqps? https://www.dayln.design/ (the sections that says designer and when you hover it appears lightning animations. If not possible, do you know how i can add this code instead? https://codepen.io/KaioRocha/pen/YoEVvZ i´ve tried but its not working 100%. 

Thank you in advanced!!!

Solved with this way

First, add a Folder Item (last item) to Pagination.

Next, add this code to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.header-actions.header-actions--right {
    display: none;
}
  a.header-nav-folder-title {font-size:0;}
  a.header-nav-folder-title:before {
    content: "\e030";
    font-family: 'squarespace-ui-font';
    font-size: 40px;
    position: absolute;
}
  .header-nav-list>div:nth-child(-n+3) {
    align-items: center;
    transition: all 0.3s ease;
    transform: translateX(500px);
}
  .tp-nav-open>div:nth-child(-n+3) {
  	transition: all 0.3s ease;
    transform: translateX(0);
  }
  html, body {overflow-x:hidden;}
  .header-menu-nav-folder[data-folder="root"]>div>div:last-child {
    display: none;
}
</style>
<script>
$(document).ready(function(){ $(".header-nav-folder-title").click(function(){
  $('.header-nav-list').toggleClass('tp-nav-open');
});
});
</script>