Inline footer menu

Hi Kharis, thanks for your help in other questions i posted earlier
i need to add ainline navigation menu to my footer like this website https://www.premierkitchens.net.au/ have in footer can u plz help me out with correct element id and css to achieve this.

i already set my footer widgets to one and footer one created a menu and add it through footer widgets /layout builder but it shows in vertical hope u got my point.
regards
fatima

Hello Fatima,

In order to help me get the correct CSS code to style your vertical menu, I need to inspect it directly. Do you have a link to share here?

Regards,
Kharis

Hi kharis
thanks for reply here is the link https://www.kitchentek.com.au/payment-options/

where i added one footer and a menu… i need it to be inline like eg

Home | About | Services | Gallery | Contact

thanks
Fatima

Thank you for sharing. Try adding this CSS code to Additional CSS:

    .footer-widgets .widget_nav_menu ul.menu:before,
    .footer-widgets .widget_nav_menu ul.menu:after {
      content: '';
      display: block;
      clear: none;
    }

    @media only screen and (min-width: 600px) {

      .footer-widgets .widget_nav_menu ul.menu {
        display: table;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
      }

      .footer-widgets .widget_nav_menu ul.menu > li {
        display: inline-block;
        float: left;
        padding: 0 20px;
      }
      
    }

Regards,
Kharis

Hi Kharis
Thanks for effort this code worked perfectly just need some adjustments i need " | " in between menu item and as u can see items are not perfectly centered vertically there is more space on top i checked there is no padding or margin and text also set to centered in the widget how to adjust that

Also the code didnt affect the mobile view it looks vertically

again thanks for super support
regards
fatima

Glad to hear that code worked for you. In order to add a vertical like between menu items, add the below CSS code:

    @media only screen and (min-width: 600px) {

      .footer-widgets .widget_nav_menu ul.menu > li {
          border-right: 1px solid #fff;
      }
      
      .footer-widgets .widget_nav_menu ul.menu > li:last-child {
        border-right: none;
      }
      
    }

Regards,
Kharis