Home › Forums › WoodMart support forum › Bug: Mobile Top Bar layout settings (Columns/Flex) are ignored

Bug: Mobile Top Bar layout settings (Columns/Flex) are ignored

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 31, 2026 at 12:35 pm #727882

    dbmtrde
    Participant

    The layout settings in the Header Builder for the top bar of mobile headers are completely ignored on the front end and have no effect whatsoever.

    My elements (social media icons and text) remain stuck together in the center. Adjusting the spacing between the elements or aligning them to the left or right via the user interface does not work.

    It only works with this additional CSS to achieve what I want.

    .whb-top-bar .whb-col-mobile {
    display: grid !important;
    grid-template-columns: max-content max-content !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
    }

    August 31, 2026 at 12:46 pm #727884

    dbmtrde
    Participant

    As you can see in my attached screenshots:

    I set the “Row columns” for the Top Bar to 3 in the settings.

    However, the Header Builder UI still only renders 1 single column for the Top Bar.

    • This reply was modified 1 day, 3 hours ago by dbmtrde.
    Attachments:
    You must be logged in to view attached files.
    August 31, 2026 at 12:56 pm #727890

    dbmtrde
    Participant

    That seems to be an even simpler solution.

    .whb-top-bar .whb-col-mobile {
    justify-content: space-between !important;
    }

    August 31, 2026 at 4:28 pm #727907

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Thank you for contacting WoodMart Support. We’ll be happy to assist you with your request.

    Before we continue, we have one quick question for you:

    Where did you first hear about WoodMart?

    We really appreciate your help with this. It takes just one click, but your answer is extremely valuable to us and helps us understand how customers discover WoodMart:
    https://tally.so/r/rj8qWl

    Now, let’s get back to your request.

    The mobile top bar is currently using a single-column layout, which is why all elements are displayed in one row without separate column controls like on desktop.

    To achieve the layout you want, you can add a Space element between the social media icons and text elements to adjust the alignment.

    See the screenshot for better understanding: https://postimg.cc/nX8yjFbn

    Best Regards

    August 31, 2026 at 6:34 pm #727920

    dbmtrde
    Participant

    Pls correct me if I’m wrong, but to me this seems like a bug—the layout configuration exists but isn’t taking effect, right?

    Attachments:
    You must be logged in to view attached files.
    September 1, 2026 at 10:50 am #727951

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    The Row Flex Layout and Row Columns options apply to the desktop header layout. These options cannot be used to change the mobile Top Bar into a 3-column layout.

    On mobile devices, the Top Bar uses a single-column layout by default, and it is not possible to change it to 3 columns through the Header Builder settings.

    Best Regards

    September 1, 2026 at 11:22 am #727958

    dbmtrde
    Participant

    I actually see this as a missing key feature, so I’d appreciate it if you could add this topic to your backlog as a feature request.

    September 1, 2026 at 2:39 pm #727979

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    For any feature request, you can create a feature request here – https://woodmart.userjot.com/ so our developers can take it into account.

    Best Regards

  • Author
    Posts

Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)