We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Re: Galleria - Mega Menu size

Solved

Galleria - Mega Menu size

JKP84
Shopify Partner
35 0 14

I am using Galleria 3.3.4

I am trying to edit the following for my dropdown menu under 'Shop' and 'About' 

 

reduce the overall width so that it does not use the full screen 

reduce the height

make each column the same size

reduce the space between columns (ie, for BIO under ABOUT it is such a short word it looks strange being in such a big column)

 

OR

 

even better would be to have them appear stacked, not across.

 

JKP84_0-1739890725581.png

 

web address: https://mojoandmuse.co.uk/

 

Accepted Solution (1)

Ellie-BOGOS
Shopify Partner
467 35 73

This is an accepted solution.

Hi @JKP84 

 

1. To make the column appear stacked:

- Go to your theme -> access the 'grid.css' file 

- Remove the display: flex; of the div container

See my attached screenshot below.

 

Menu Size Adjustment.png

 

2. To make the mega menu width appear smaller

- Go to 'main.navigation.css' file

- Change the width from 100% to 12%

- Add this line below: left: auto;

See my attached screenshot

 

Menu Size Adjustment.png

 

Like or Accept as Solution if my answer is helpful!💌

 

Create powerful sales promotions with BOGOS app, featuring free gifts, discounts, bundles & upsells.

 

If my post is helpful, let me know by giving a Like or Accept solution.
Use BOGOS to create powerful promotions on your Shopify stores: free gifts, discounts, bundles, upsells!
Have a nice day ^^

View solution in original post

Replies 2 (2)

Ellie-BOGOS
Shopify Partner
467 35 73

This is an accepted solution.

Hi @JKP84 

 

1. To make the column appear stacked:

- Go to your theme -> access the 'grid.css' file 

- Remove the display: flex; of the div container

See my attached screenshot below.

 

Menu Size Adjustment.png

 

2. To make the mega menu width appear smaller

- Go to 'main.navigation.css' file

- Change the width from 100% to 12%

- Add this line below: left: auto;

See my attached screenshot

 

Menu Size Adjustment.png

 

Like or Accept as Solution if my answer is helpful!💌

 

Create powerful sales promotions with BOGOS app, featuring free gifts, discounts, bundles & upsells.

 

If my post is helpful, let me know by giving a Like or Accept solution.
Use BOGOS to create powerful promotions on your Shopify stores: free gifts, discounts, bundles, upsells!
Have a nice day ^^
JKP84
Shopify Partner
35 0 14

Excellent - thanks so much this worked!