Footer Menu Horizontal rather than Vertical

Will you have any more than those 4 links?

Hi innuvo, it’ll just be the 4 links:
Forum
Privacy Policy
Refund Policy
Affiliates

This footer will remain consistent accross the site.

Thanks

Firstly, add this CSS which will help with the footer issue widths. Do note that if you end up adding more links this wont work anymore as you will have to adjust the widths.

#menu-footer li {
  display: inline-block;
  text-align: center;
  width: 24%;
}

Also add this below so that when it goes below your theme’s break point of 800px, it doesnt make it look all weird. The problem you do have is that when the screen goes below 800px wide, your footer shrinks right down. So if you add this CSS it helps with that as well. Hopefully this is all that you need.

@media screen and (max-width: 799px) {

fusion-widget-area .col-xs-1 {
  width: 100%;
}

#menu-footer li {
  display: inline-block;
  text-align: center;
  width: 100%;
}

}

Hi Innuvo, that’s worked perfect for splitting them as a 4 way footer thanks!

The site is using a fixed width layout, so regardless of media device it’ll be loading up the full site rather than responsive/mobile as such.

For the styling of the footer, is their an easy way to add the likes of a box-shadow inset?

I am not quite sure what you mean by that? DO you have an example?

So if i add in the following to .css

#menu-footer{
box-shadow: 0 4px 35px rgba(0, 0, 0, 0.5) inset;
}

If you view the site live, you’ll see that its just shadowed the actual footer links rather than the whole footer box.

Thanks

Ah ok, youd have to add it to the whole footer container. Which in this instance would be this:

.fusion-footer-widget-area {
  box-shadow: 0 4px 35px rgba(0, 0, 0, 0.5) inset;
}

Hi,

Even I’m facing the same problem. Trying to update the Footer on my website to display horizontally rather than vertically. I am using the latest WP and Bldr theme. I just want to use only 1 of 4 possible footer widgets and insert all the footer links there. I have selected the pages using the Menu widget but, when I update the same in Footer 1 widget it is displaying vertically rather than horizontally.

The issue I’m facing is, it’s only displaying in a Vertical order. Please anyone assist me with the custom .css code that I’ll implement to style this footer and to display horizontally.

The site is; https://www.thedigitalvibes.com/

Thanks in advance for assisting me.