Header layout breaks into two lines on smaller screens (needs to stay one line)

Hello,

I’m using the Woodmart theme and I’m having an issue with my main header layout.
On desktop (full HD monitors) everything looks fine, but on laptops or smaller screens (around 1366–1440px width), the main header breaks into two lines — the menu goes on the second line, while the logo and icons stay on the first one.

Here’s my current header structure in the Header Builder:

Left column: Space + Main Menu

Center column: Logo

Right column: Account, Search, Wishlist, Cart, Space

I’ve already tried:

reducing logo size,

adjusting menu spacing,

using custom CSS (flex-wrap: nowrap),

…but the theme’s built-in scripts still force the header to wrap into two rows when there isn’t enough horizontal space.

What I need is:
➡️ The entire header to stay in one single line on all screens above the mobile breakpoint (until the mobile/burger menu appears).
➡️ The logo to remain centered dynamically between the left (menu) and right (icons) sections.

Could you please tell me the correct way (or provide the necessary code / setting) to prevent the header from breaking into two lines?

Thank you in advance!
— Dimitar

Attachments:

You must be logged in to view attached files.

Hello

Try to add the following custom css code in Theme Settings > Custom CSS.

@media (min-width: 1025px) {
  .whb-general-header-inner .whb-flex-row {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .whb-general-header-inner .whb-col-left,
  .whb-general-header-inner .whb-col-center,
  .whb-general-header-inner .whb-col-right {
    flex: 1 1 auto !important;
    white-space: nowrap !important;
  }

  /* Ensure logo stays centered dynamically */
  .whb-general-header-inner .whb-col-center {
    display: flex !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }

  /* Allow menu items and icons to shrink slightly if needed */
  .whb-col-left .wd-header-nav,
  .whb-col-right {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* Prevent menu from pushing logo down */
  .whb-general-header-inner .whb-col-left .wd-header-nav > ul {
    flex-wrap: nowrap !important;
  }

  /* Reduce excessive horizontal padding if needed */
  .whb-col-left,
  .whb-col-right {
    gap: 15px;
  }
}

Best Regards,

[Author]

Posts