Design Site Nav Bar

Hi, i need a help. for someone know thiss setting, What should I change or add to the CSS? and how to make the box on the right instead of the left

from this :

to this:

thanks

Hi @megawdyaaaa

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag
.header-layout--right .site-nav--has-dropdown:nth-last-child(2) .site-nav__dropdown .site-nav__deep-dropdown {
    right: auto;
    left: 100%;
}

.header-layout--right .site-nav--has-dropdown:nth-last-child(2) .site-nav__dropdown {
    right: unset !important;
}

Result:

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,

Sandeep Pangeni

@megawdyaaaa Please follow below steps to make the drop-down box on the right instead of the left. Let me know whether it is helpful for you.

  1. From admin, go to “Online Store” → “Themes”.
  2. Click action button from the current theme and select “Edit code”.
  3. Search “theme.css” file and paste below code at the bottom of the file.
.header-layout .header-item .site-nav .site-nav--has-dropdown .site-nav__dropdown .site-nav__deep-dropdown {
    left: 100% !important;
    right: unset !important;
}
.header-layout .header-item .site-nav .site-nav--has-dropdown .site-nav__dropdown {
    right: unset !important;
}

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

omg big thanksss