Brooklyn theme - mobile footer menu layout

Highlighted
Excursionist
50 0 3

Hello,

On mobile viewing, my stores footer menu links all stack on top of each other. Is there a way to get them to split into two columns?

Many thanks 

George 

1 Like
Highlighted
Shopify Partner
1 0 0

Same problem here. 

0 Likes
Highlighted
Tourist
16 0 2

Did you find a solution for this? 

0 Likes
Highlighted
Excursionist
28 0 7

I'm having the same issue. Did anyone find a resolution?

0 Likes
Highlighted

Hi all,

In Brooklyn, it is possible to have the menus in 2 columns for mobile view. But keep in mind that some mobile go down to 320px wide, some to 280px ( older ). So having two columns 160+160 wide, then have "Really long menu item names" will overlap or double line and look terrible.

Depending on you menu names and space available usually I make custom code to split into 2 columns, then down to 1 column on really small width devices, or drop the font size down.

What is your store URL so I can have a look for you?

Are you really comfortable adding code into your website and making slight adjustments as needed ? ( like when menu names change in the future )

:)

 

Dan 'the web man' from DownUnder | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Secure Email:
1 Like
Highlighted
Excursionist
28 0 7

My URL is www.shoplilyrose.co and the password is kna. On desktop, the footer menu is in columns (shown below) but on mobile, this switches to a stacked menu. I want it to stay like this throughout.

 Capture.PNG

0 Likes
Highlighted

Hi Kimbermiller,

Goto

Online store >> themes >> use the 'actions' menu to choose 'edit-code' in your active / live theme

Then find the bold heading 'Assets" and click that to open file names

Choose 'themes.scss.liquid' and a wall of code text will open on the right

Scroll all the way to the bottom and add the below

/* force 3 columns footer in mobile view */
.grid-uniform .small--one-whole { width: 33% !important; }

This will give the below results for most mobiles

mobilelily.jpg

 

 

and for small width mobiles this

smallmobilelily.jpg

 

 

Up to you but 3 columns on a mobile needs very small font or short menu names.

Maybe move the payment options out of the column onto its own underneath so it has the full width?

Let me know if this helps.

:)

Dan 'the web man' from DownUnder | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Secure Email:
1 Like
Highlighted
Excursionist
28 0 7

Thank you! If I wanted to move the third column to a different section is there coding I would need for that? I would rather have this full length across the bottom and 2 columns in the footer.

Capture.PNG

0 Likes
Highlighted

Luckily there is a simple fix like here

2plus1.jpg

Basically the above code delete and replace with

/* force 2 columns footer in mobile view */
.grid-uniform .small--one-whole {
    width: 49%;
}

/* last footer column is full width */
.large--text-right {
    width: 100% !important;
    text-align: center !important;}

This makes 2 columns ( 49% ) and the last column is unique already so we can make that one only 100% width, then centre whats inside it

Works as is, but if you remove add more columns in the customizer footer section it will make a mess.  Fixing properly will be alot more coding changes to accomodate that.

Idealy if I had a access to the store, I would code a completely seperate footer with the copyright / payment logos in there.

BTW online store >> themes  >> "actions" select EDIT LANGUAGES

then search on "powered" and replace with a single blank space in the "powered by shopify" box like below. This will remove the "powered by shopify" easily.  :)

 

powered.png

 

 

 

Dan 'the web man' from DownUnder | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Secure Email:
1 Like
Highlighted

I am glad this worked out for you. Please dont forget to like and accept as solution

:)

Dan 'the web man' from DownUnder | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Secure Email:
1 Like