Dropdown Menu is too big in the screen On Pipeline Theme

[Rizwan12]

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,
Thank you very much.

[syedsumaimaly]

Hi @Rizwan12 

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

[Rizwan12]

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]

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

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

[syedsumaimaly]

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

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

[Rizwan12]

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

[syedsumaimaly]

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

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]

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

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.

[Rizwan12]

Here you can see the changes.

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

[syedsumaimaly]

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

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

[syedsumaimaly]

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

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