Jump to content

[Share] Dropdown in Burger Menu

Recommended Posts

Posted

To make Dropdown appear in Burger Menu, you can follow these.

image.png.e3eb78f5b9ccf42edc4136de6eebc72f.png

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

#1. First, use this code to Custom CSS box

[data-folder="root"] {
  .header-menu-nav-wrapper, div.header-nav-folder-content {
      display: none;
  }
  &~div {
    display: none !important;
}
  nav.header-nav-list {
  flex-direction: column;
}
.header-nav {
    display: flex !important;
    align-items: stretch;
    justify-content: center;
    height: 100% !important;
}
a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
}
.header-nav-wrapper {
    position: absolute;
    top: 20%;
}
  .header-nav-folder-content {
    position: static !important;
}
.header-nav-folder-content * {
    text-align: center !important;
}
.header-nav-folder-content.show-menu {
    display: block !important;
  }}

image.thumb.png.9e4b04fd34d692aeb6fd7527cbb6dd16.png

#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() {
  $('.header-display-mobile div.header-nav').clone().appendTo('[data-folder="root"] .header-menu-nav-folder-content');
  $('[data-folder="root"] a.header-nav-folder-title').removeAttr('href');
   $('.header-nav-folder-title').click(function() {
      var content = $(this).next('.header-nav-folder-content');
      $('.header-nav-folder-content').not(content).removeClass('show-menu');
      content.toggleClass('show-menu');
    });
});
</script>

image.png.17f2869b530a86b0eb84d03cc28a7f3c.png

#3. Result

(before click)

image.png.487539c898bc48a6c47fbe373e32f934.png

(when click dropdown)

image.png.e3eb78f5b9ccf42edc4136de6eebc72f.png

image.png.6a78b70887f878098b766f9fd42394fc.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • Replies 2
  • Views 412
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted

Firstly tuanphanthanks for your CSS inputs in general, you truly are a legend!

I tested this code, attempting to show a drop down menu for shop categories (currently inside burger menu). Unfortunately it didnt work, for some reason. 

My site URL is www.cpdwg.com

Posted
1 hour ago, cpdwg said:

Firstly tuanphanthanks for your CSS inputs in general, you truly are a legend!

I tested this code, attempting to show a drop down menu for shop categories (currently inside burger menu). Unfortunately it didnt work, for some reason. 

My site URL is www.cpdwg.com

Can you keep code? I just tested from my browser and it works here

image.thumb.png.12cb9a4a8de0bf1f17231dd120060b6e.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.