Shopify themes, liquid, logos, and UX
Hello!
The icons in my drop-down menu are not aligned with the text.
Can somebody please help me figure out how to fix it?
PFA the image for reference.
Solved! Go to the solution
This is an accepted solution.
You can try again with this code below:
<style>
.site-nav--has-dropdown:nth-child(2) .site-nav__dropdown-link:not(a[href="/collections/engagement-rings"]){
display: flex !important;
align-items: center !important;
}
</style>
Hi @saachi ,
This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:
Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :
<style>
.site-nav--has-dropdown:nth-child(2) .site-nav__dropdown > li > a:not(:nth-child(1)){
display: flex;
align-items: center;
}
</style>
Hope my answer will help you.
Best regards,
Victor | PageFly
Hello @PageFly-Victor
Thanks for your reply. Unfortunately, adding this code didn't change anything. 😕
This is an accepted solution.
You can try again with this code below:
<style>
.site-nav--has-dropdown:nth-child(2) .site-nav__dropdown-link:not(a[href="/collections/engagement-rings"]){
display: flex !important;
align-items: center !important;
}
</style>
Thank you so much!! That worked perfectly! 😄
I just have another query - Is there any way to add space between the icons and text? Currently the icons are appearing too close to the text.
Yes you can add the gap property inside my code in previous answer, here is example:
<style>
.site-nav--has-dropdown:nth-child(2) .site-nav__dropdown-link:not(a[href="/collections/engagement-rings"]){
display: flex !important;
align-items: center !important;
gap: 5px;
}
</style>
Thank you! You're welcome 😄
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024