How can I improve footer alignment and make menus collapsible?

Store Design
1

HELLO,

  1. I want to center align my footer on desktop version. How to do that?
  2. How can I make the footer menus collapsable?

theme: impulse, thestateplate.com

Please help.

raghavjhawar_0-1616260522620.png
raghavjhawar_0-1616260522620.png1920×1080 265 KB

2

Adjust .site-footer width only on desktop version

3

Hi

Do you want to make footer links center aligned like this screenshot?

Prezentech_0-1616265035556.png
Prezentech_0-1616265035556.png1343×364 20.8 KB

Or want to make footer 4 section in the center?

To make it footer collapsible we need to add accordion JS so, it will become collapsible

1 Like
4

from where to do this?

5

I want to do both, center align and then also to make it spread throughout

6

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 960px){
.footer__item--1494301487049 ,
.footer__item--80f90459-8c2a-4fce-8f16-9d7598b2f90d,
.footer__item--3684da0d-295d-481f-b5a0-acc133b7f59b,
.footer__item--1494301487048 {
    width: 25% !important;
    text-align: center !important;
}
}
1 Like
7

Thank you so much for the help

8

Hello,
I am sorry but i don’t want to center alight text

Can you please help?

I have pasted your code already though

I want the text to be left aligned and the gap between all the columns to be spread evenly, please advise

raghavjhawar_0-1616495132257.png
raghavjhawar_0-1616495132257.png1920×1080 397 KB

raghavjhawar_1-1616495142898.png
raghavjhawar_1-1616495142898.png1920×1080 290 KB

9

Remove below code:

@media only screen and (min-width: 960px){
.footer__item--1494301487049 ,
.footer__item--80f90459-8c2a-4fce-8f16-9d7598b2f90d,
.footer__item--3684da0d-295d-481f-b5a0-acc133b7f59b,
.footer__item--1494301487048 {
    width: 25% !important;
    text-align: center !important;
}
}
10

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 960px){
#shopify-section-footer .site-footer .page-width .grid .grid__item{
  width: 25% !important;
    text-align: left !important;
}
}
11

Thank you, you are great