Solved

Dawn Theme - Making mobile footer menu layout the same as the desktop view

GlowRope
Excursionist
17 1 2

Hi,

I would like the 3 footer menu columns to be in the same layout however centered on the page in the desktop view. I would also like the mobile version to have the same layout as the desktop view.

 

Would somebody be able to help me out with this?

 

www.glowrope.com.au

Password: welcome

 

Thanks in advance.

Desktop.JPGMobile.JPG

Accepted Solutions (2)
GlowRope
Excursionist
17 1 2

This is an accepted solution.

Hi @suyash1 Thanks for that, works perfectly the heading but the links are not centered. Did you have a solution for the mobile view issue? 

 

Mobile.JPGDesktop.JPG

View solution in original post

suyash1
Shopify Partner
9140 1138 1485

This is an accepted solution.

@GlowRope - please add this css to the end of your base.css file for mobile view

 

.list-menu__item {justify-content: center;}
To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session

View solution in original post

Replies 9 (9)

suyash1
Shopify Partner
9140 1138 1485

@GlowRope - do you want it like the screenshot? if yes then please add this css to the very end of your base.css file

 

.footer-block__heading{text-align: center;}
.footer-block__details-content li{text-align: center;}

 

suyash1_0-1697248231047.png

 

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
GlowRope
Excursionist
17 1 2

This is an accepted solution.

Hi @suyash1 Thanks for that, works perfectly the heading but the links are not centered. Did you have a solution for the mobile view issue? 

 

Mobile.JPGDesktop.JPG

suyash1
Shopify Partner
9140 1138 1485

This is an accepted solution.

@GlowRope - please add this css to the end of your base.css file for mobile view

 

.list-menu__item {justify-content: center;}
To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
GlowRope
Excursionist
17 1 2

Hi @suyash1 Legend, that's awesome cheers!

 

Any chance you know how to now sort those menus horizontally on mobile view like it is displayed on the desktop view?

suyash1
Shopify Partner
9140 1138 1485

@GlowRope - that will not look good, it will be like this

 

suyash1_0-1697252936702.png

 

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
GlowRope
Excursionist
17 1 2

Hi @suyash1 Yeah you are right.

 

The other option was make it a drop down menu and have them default as closed, Also when you click on the next menu it automatically closes the previous menu. Did you know how that could be done with the drop down menus centered on the page horizontally?

suyash1
Shopify Partner
9140 1138 1485

@GlowRope - no sorry , not sure about the drop down part

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session

ZenoPageBuilder
Shopify Partner
1052 203 217

Hello @GlowRope 

The mobile screen is small, so making it the same layout as the desktop is not so good.

 

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
GlowRope
Excursionist
17 1 2

Hi @ZenoPageBuilder 

 

Good point, I wouldn't mind seeing it to see if it is usable or not. The other option was make it a drop down menu and have them default as close and when you click on the next menu it automatically closes the previous menu. Did you know how that could be done with the drop down menus centered on the page horizontally?