Solved

Design Site Nav Bar

megawdyaaaa
Excursionist
42 2 0

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 : 

megawdyaaaa_0-1711079092022.png

 

to this:

megawdyaaaa_1-1711079808681.png

 

thanks

Accepted Solutions (2)

LuffyOnePiece
Shopify Partner
348 60 60

This is an 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:

SandeepPangeni_0-1711083314771.png

 

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

 

 

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

View solution in original post

Vinsinfo
Shopify Partner
181 60 54

This is an 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;
}

 

Vinsinfo_0-1711089508432.png

 

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

View solution in original post

Replies 3 (3)

LuffyOnePiece
Shopify Partner
348 60 60

This is an 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:

SandeepPangeni_0-1711083314771.png

 

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

 

 

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

Vinsinfo
Shopify Partner
181 60 54

This is an 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;
}

 

Vinsinfo_0-1711089508432.png

 

 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
megawdyaaaa
Excursionist
42 2 0

omg big thanksss

 

megawdyaaaa_0-1711093119622.png