[Resolved] Moving Footer Widgets

[Vladimir]

Hi,

I have 5 footer widgets by default on attention.cc. Footer Widget 2 is called “KATEGORIJE” and it has some categories listed. Next to it is Footer WIdget 3 with social media icons and then Footer Widget 4 an Footer Widget 5 are empty. I would like to to insert empty footer widget between Footer WIdget 2 and Footer Widget 3. I tried moving Empty Footer Widget in between but the interface does not allow me. I tried copied contents from Footer Widget 3 (social media icons) into empty slot in Footer WIdget 4, but it doesn’t look intuitive and I am afraid I will delete the icons and mess something up.

What is the easiest way to insert empty Footer Widget between Footer WIdget 2 and Footer Widget 3 so I can add more category navigation items in there?

Here is the screenshto of where I want to insert empty footer widget so I can add more category navigation to it?

[Vladimir]

Here is the screenshot: https://ibb.co/k8LLyp9

[Ying]

Hi Vladimir,

It’s not a good practice to insert empty widgets.

Can you add all the categories you want to the widget 2? Then we can take a look how to adjust your current CSS code to make it work.

Let me know!

[Vladimir]

Hi,

OK, I did what you suggested and added all categories to Widget 2. Now you can see how long it is on attention.cc footer:

m:vijesti
m:tel IPTV
m:svijet
m:ovo m:ono
m:tel info
m:arket
m:apps
m:mix
m:reza
Preporučujemo
Tehnologija
Iz Ponude
Iza Ugla
U Žiži
Prijateljstva
Kako Da…
Tv Filter

Can you send me CSS that will break this into 3 columns?

Column 1:
m:vijesti
m:tel IPTV
m:svijet
m:ovo m:ono
m:tel info
m:arket

Column 2:

m:apps
m:mix
m:reza
Preporučujemo
Tehnologija
Iz Ponude

Column 3:

Iza Ugla
U Žiži
Prijateljstva
Kako Da…
Tv Filter

[Ying]

1. Find this CSS in customizer > additional CSS:

@media (min-width:1025px) {
  .footer-widgets .footer-widget-1 {
    flex-basis: 50%;
		padding-right: 100px;
  }
  .footer-widgets .footer-widget-2 {
    flex-basis: 20%;
  }
  .footer-widgets .footer-widget-3 {
    flex-basis: 30%;
  }
}

2. Change it to:

@media (min-width:1025px) {
  .footer-widgets .footer-widget-1 {
    flex-basis: 40%;
  }
  .footer-widgets .footer-widget-2 {
    flex-basis: 40%;
  }
  .footer-widgets .footer-widget-3 {
    flex-basis: 20%;
  }
  .site-footer ul#menu-footer-menu-read {
      display: flex;
      flex-wrap: wrap;
}

  .site-footer ul#menu-footer-menu-read >li {
      width: 33.3%;
}
}

[Vladimir]

I have installed Simple CSS and know how to add CSS to Simple CSS. I don’t know how to find CSS in Customizer? Where is Customizer located?

[Vladimir]

Why don’t you just show me how COPY Widget 3 content into Widget 5 (that is empty now) and then I can insert portion of this long footer into WIdget 3 and another portion into Widget 4? This way I don’t have to use CSS? What do you think of this idea?

[Vladimir]

I found location where to enter CSS. You did a nice job on CSS. Looks good on desktop. I will submit another ticket for mobile. CLosing this ticket. Thank you.

[Ying]

Here’s how to find the customizer:
https://docs.generatepress.com/article/finding-the-customizer/

Okay, let’s try your idea:
1. Go to customzier > layout > footer > footer widgets, change it to 5.
2. Go to appearance > widgets, drag the content in widget 3 to widget 5, add content to widget 3, and widget 4.

[Vladimir]

Great support. Thank you. Learned something new from both answers.

[Ying]

Glad to hear that 🙂

[Author]

Posts