Header categories cut off on laptops

[it-9359]

Hi,

I’m using the Header Categories element (not the mega menu) because I have around 15 product categories and the side navigation or mega menu doesn’t fit well for my shop structure.

The categories element in the header looks great on desktop, but on smaller laptops (e.g. 1366×768) the categories dropdown gets cut off vertically and some categories are no longer visible.

I don’t want to use the mega menu and I also don’t want to move categories into a sidebar.

What I’m looking for is a clean CSS-based solution that:

makes the Header Categories block smaller on laptops using media queries

scales the entire categories element (button + dropdown)

keeps the sub-categories panel working correctly

does not affect Elementor widgets or page content

avoids breaking hover behavior or the layout

In short:
I need the header categories and its dropdown to be responsive on laptops, without switching to a mega menu or sidebar.

Has anyone implemented this successfully, or is there a recommended approach from Xtemos for this case?

Thanks in advance.

• This topic was modified 5 months ago by it-9359.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to say I am unable to visit your site. Please share the access to your site so I will check and give you a possible solution: https://postimg.cc/N9m3Fc6j

Best Regards,

Now you can get in

Hello,

In the WoodMart > Header Builder, select your Header Categories element and enable:

Limit categories option: https://ibb.co/PsJ1Q3Xc

This lets you control how many categories are shown and adds a “Show more” button. It’s ideal when you have many categories.

If you prefer to show all categories, you can shrink the menu so everything fits vertically.

Add this in:

Theme Settings > Custom CSS > Custom CSS for desktop:

@media (max-width: 1400px) and (min-width: 1025px) {
    .wd-nav-vertical.wd-design-default > li > a {
        min-height: 30px;
        font-size: 12.5px;
        padding: 5px 10px;
    }
}

Best Regards,

I prefer to show all categories, but your Code doesn’t work. I don’t see any differences.
and I don’t zoom anything!

I also Try it to put it in the Css under the customizer!

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards,

Ok

Hello,

It was due to the cache. I have added the custom css on your site in Theme Settings > Custom CSS and purged Varnish cache, and it is working fine. Please check back your site and check the issue after completely clearing the cache.

Best Regards,

Thank you very much, I found the problem.
the laptops I used are 1536px, but now it works, thank you very much!!

Hello,

You’re Most Welcome!

Feel free to write back anytime. If you need further assistance, we are always here to help you.

If you have a minute, we’d truly appreciate your feedback — it helps us improve the product and shape future updates more effectively. We’d love your feedback on our theme: https://tally.so/r/w4l54k

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts