Design Site Nav Bar

[megawdyaaaa]

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

[LuffyOnePiece · Accepted solution]

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 </body>

.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

[LuffyOnePiece · Accepted solution]

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 </body>

.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

[Vinsinfo · Accepted solution]

@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.

[megawdyaaaa]

omg big thanksss