Footer Builder Menu

Support
#1

Is there a way to split an inline menu like this? I’m having trouble figuring this for the mobile footer.

#2

Hi there,

Thanks for writing around! You can create two separate menus and display them in two columns or you can do it with custom CSS, just add the following code in the Theme Options > CSS:

.x-bar-footer .x-menu.x-menu-inline {
    -moz-column-count: 2;
    -moz-column-gap: 0;
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    column-count: 2;
    column-gap: 0;
    display: block;
}

Hope this helps!

#3

Ok, so I have to use CSS to achieve this? Or, is this possible with just the builder?

#4

Hey There,

Regretfully there isn’s a setting in the builder to create two columns for the menus. And that is why you will have to use the custom css in the custom css section of the header instead. To make sure that it will only be two columns in smaller screen, you have to update the code and use this instead:

@media(max-width: 979px){
  .x-bar-footer .x-menu.x-menu-inline {
    -moz-column-count: 2;
    -moz-column-gap: 0;
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    column-count: 2;
    column-gap: 0;
    display: block;
  }
}

Please let us know how it goes.

#5

Oh, ok. This was added. Is there a way to remove this space at the top?

#6

Hello There,

Please make sure of this code instead:

@media(max-width: 979px){
  .x-bar-footer .x-menu.x-menu-inline {
    -moz-column-count: 2;
    -moz-column-gap: 0;
    -moz-column-fill: auto;
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    -webkit-column-fill: auto;
    column-fill: auto;
    column-count: 2;
    column-gap: 0;
    display: block;
    -moz-column-span: all;
    -webkit-column-span: all;
         column-span: all;
  }
  
  .x-bar-footer .x-menu.x-menu-inline li {
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */
  }
}

For more details about this css column property, you can check this out:

1 Like
#7

That’s great, and thank you for the reference!

#8

You are most welcome. :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.