Dropdown Menu is too big in the screen On Pipeline Theme

Rizwan12
Tourist
18 0 0

Hi there,
I'm new on shopify, currently I'm using pipeline theme,

I would like to decrease the height of the dropdown menu and make it thin so it can take much less space on the screen.

Please help me to fix this,Screenshot (9).png
Thank you very much.

 

 

Replies 14 (14)

syedsumaimaly
Trailblazer
147 16 20

Hi @Rizwan12 

Would you mind to share your store URL website, with password if its protected? Thanks!

Rizwan12
Tourist
18 0 0

Thank you very much for your response, here is a link let me know if you need anything else.
https://06157e-2.myshopify.com/

syedsumaimaly
Trailblazer
147 16 20

@Rizwan12 

Follow these Steps:

Go to Online Store  Edit Code Find theme.liquid file or base.css

Add the following code in the bottom of the file above </body> tag

product-grid-item.product-grid-item.group\/product-grid-item {
    width: 40%;
    display: block;
}

RESULT:

 

syedsumaimaly_0-1696337806925.png

If I managed to help you then, don't forget to Like it and Mark it as Solutions.

 

syedsumaimaly
Trailblazer
147 16 20

@Rizwan12 

Follow these Steps:

Go to Online Store  Edit Code Find theme.liquid file or base.css

Add the following code in the bottom of the file above </body> tag

product-grid-item-variant.product-grid-item__content.is-slideshow {
    width: 30%;
    display: block;
    margin: auto;
}

RESULT:

syedsumaimaly_1-1696338164041.png

If I managed to help you then, don't forget to Like it and Mark it as Solutions.

Rizwan12
Tourist
18 0 0

I appreciate your effort, I tried both of your code but sorry to say both are not working.

01.PNG02.PNG

syedsumaimaly
Trailblazer
147 16 20

@Rizwan12 

Try this ...

{% style %}
.product-grid-item-variant.product-grid-item__content.is-slideshow {
    width: 30%;
    display: block;
    margin: auto;
}
{% endstyle %}

If I managed to help you then, don't forget to Like it and Mark it as Solutions.

Rizwan12
Tourist
18 0 0

Not working, one thing I want to mention here that my theme is pipeline and there is not base.css file. On the assets folder there is theme.css file and I have also tried your code on theme.css but did not work.

syedsumaimaly
Trailblazer
147 16 20

@Rizwan12 You can also paste this code on theme.liquid file above the </body> tag.

 

{% style %}
.product-grid-item-variant.product-grid-item__content.is-slideshow {
    width: 30% !important;
    display: block !important;
    margin: auto !important;
}
{% endstyle %}

 

Rizwan12
Tourist
18 0 0

Still not working,
One thing I want to share that I changed the width of 100% to 40% on this code into the theme.css file:-

 

.wrapper--full, .wrapper--full .grandparent .header__dropdown__wrapper {
max-width: none;
margin: 0 auto;
padding-left: var(--outer);
padding-right: var(--outer);
width: 40%;
}

Then I got the result but the web page has become shrink you can see the logo now come to the menu and also this happen with the footer. Kindly see the screen shot.
Please help me if we can align logo to the left, search bar to the right and same for the footer then everything will be perfect.

 

Screenshot (10).png

Rizwan12
Tourist
18 0 0

Here you can see the changes.

 

https://06157e-2.myshopify.com/?_ab=0&_fd=0&_sc=1

syedsumaimaly
Trailblazer
147 16 20

@Rizwan12 Replace previous code with this code in Theme.css File

.wrapper--full, .wrapper--full .grandparent .header__dropdown__wrapper {
max-width: none;
margin: 0 auto;
padding-left: var(--outer);
padding-right: var(--outer);
width: 100%;
}

.product-grid-item-variant.product-grid-item__content.is-slideshow {
    width: 30%;
    display: block;
    margin: auto;
}

 If I managed to help you then, don't forget to Like it and Mark it as Solutions.

Rizwan12
Tourist
18 0 0

Still same situation.
Let me know if we can adjust the margin of this code, them we may find solution.

01.PNG

syedsumaimaly
Trailblazer
147 16 20

@Rizwan12 can you please invite me as a collaborator its easy for you and me also to find the bug and solved it as well. Otherwise it takes alot of time. You already stuck on this issue since yesterday.

Rizwan12
Tourist
18 0 0

Thank you very much for all your support, let me ask the admin of this page.