Archived topic
Moving Footer Widgets
10 replies · Started by Vladimir on November 9, 2022
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?
Here is the screenshot: https://ibb.co/k8LLyp9
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!
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
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%;
}
}
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?
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?
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.
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.
Great support. Thank you. Learned something new from both answers.
Glad to hear that :)
