Unsen theme second level menu problem

Store Design
, ,

Topic summary

A user encountered an issue with the Unsen Shopify theme where the second-level dropdown menu was not appearing. They shared a screenshot showing the problem.

Solution provided:

  • Add custom CSS code to Assets/t4s-submenu.css
  • The code forces second-level submenus to display on hover
  • Includes positioning and styling rules for the dropdown behavior

Follow-up issue:
After implementing the fix, the user noticed the menu was displaying in RTL (right-to-left) format instead of LTR (left-to-right).

Additional fix:

  • Supplementary CSS code was provided to correct text alignment and padding
  • This adjusted the menu to display properly in LTR format

Resolution: Both issues were successfully resolved. The user confirmed the solutions worked and expressed gratitude for the assistance.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

hi,

i am trying to Design shopify store using unsen theme, but i have problem with second menu not apper !

i have 2 level menu and the problem with second

https://47a2bc-fc.myshopify.com/

password : tahlud

Screenshot 2024-05-15 001829.png
Screenshot 2024-05-15 001829.png1345×743 95.9 KB

2

Hi @Abdallahsherif ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/t4s-submenu.css
  3. Add code below to end of file
.t4s-type__drop .t4s-menu-item.has--children:hover .t4s-sub-menu.t4s-sub-menu-2 {
  display: block;
}
.t4s-type__drop .t4s-menu-item.has--children .t4s-sub-menu.t4s-sub-menu-2 {
  position: absolute;
  left: -100%;
  top: 0;
  background-color: var(--t4s-body-background);
}
body .t4s-menu-item.t4s-type__drop > .t4s-sub-menu {
  overflow: visible;
  max-height: inherit;
}
1 Like
3

super it worked, thanks

4

Screenshot 2024-05-15 051655.png
Screenshot 2024-05-15 051655.png975×566 41 KB

why menu LTR ?

i want it RTL as all theme

5

Hi,

If you want to RTL you can add more code below

.t4s-type__drop .t4s-menu-item.has--children:hover .t4s-sub-menu.t4s-sub-menu-2 {
  padding-right: 20px;
  text-align: right;
}
1 Like
6

Thank you once again from the bottom of my heart for everything you have done.

helpful man