Re: Text and Icon alignment

Solved

How can I align text and icons in my drop-down menu?

saachi
Excursionist
29 0 4

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.

 

url: www.blingfactory.com.au

 

icons.jpg

Accepted Solution (1)
PageFly-Victor
Shopify Partner
7865 1786 3107

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>

View solution in original post

Replies 7 (7)

PageFly-Victor
Shopify Partner
7865 1786 3107

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

saachi
Excursionist
29 0 4

Hello @PageFly-Victor 

 

Thanks for your reply. Unfortunately, adding this code didn't change anything. 😕

PageFly-Victor
Shopify Partner
7865 1786 3107

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>
saachi
Excursionist
29 0 4

@PageFly-Victor 

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.

PageFly-Victor
Shopify Partner
7865 1786 3107

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>

@saachi  

saachi
Excursionist
29 0 4

@PageFly-Victor 

That worked! You're a saviour. Thank you so much!! 😄

PageFly-Victor
Shopify Partner
7865 1786 3107

Thank you! You're welcome 😄