Sticky header does not display properly

Hello,

first of all I want to thank you for creating this magnificent theme!
I noticed that at certain resolutions the sticky header cannot handle the menu item properly, it not only affects the page I am working right now but also the Woodmart demo, see screenshot made at 1040px wide as an example. Tested both with Firefox and Chrome.

Is there a “cure” for that?

Thank you.

Hello,

I saw the screenshot you attached. The Issue is that you are using more elements in the navbar.

That’s why it is displayed like that. There is less space for the appearance of the navbar because of the other elements. Please reduce the number of elements in the header that will fix it.

Best Regards.

Well, this is not an option, all of them are necessary. They are not even long.
For me the expected behavior would be to automatically collapse all the items which do not fit in some kind of drop-down “more” menu.

Hello,

I am sorry for the inconvenience, let me explain you again in detail.

The way you are testing the Theme/Site is not the proper and standard way, Every Responsive Theme/Site in the world works on some framework like bootstrap or on media queries which make the Theme/Site responsive for different screen resolution sizes and those sizes are standard for different devices World Wide, like:

For Mobile: Below and to 767px
For Tablet: From 768px to 991px
For Laptop: From 992px to 1200px
For Large Desktop: From 1201px to so on.

So if you simply resize any of the browsers for testing the Theme/Site then at a certain point the layout must distort and this is not the standard way as I explained above.

You always have to test the Theme/Site on real devices or on online simulator like: https://www.responsinator.com/?url=https%3A%2F%2Fwoodmart.xtemos.com%2Fdemo-electronics%2Fdemo%2Felectronics%2F

This is how it works, and if you still want to check by resizing the browser’s only then simply you have to reduce the content or use Custom media Queries for resizing the content or remove padding/margins etc.

Best Regards.

Hello,

yes, I am familiar with the concepts of responsive design, CSS media queries, flex, grid, etc. For the test I was not using the site you’ve mentioned but the dev tools of my browser, but I suppose the findings are similar.
I was also thinking of changing the break point to some higher value so that the swap from a full size menu to a hamburger menu occurs prior the menu is “crushed” by the surrounding element. I only have this issue between 1063px and 1024px, so my idea was to change to the next lower responsive layout with hamburger as soon as the resolution drops below 1063px.
But I could not find the possibility to adjust the break point values directly from the theme settings. But if you give me some guidance which CSS file needs to be adjusted I could do that.

Thanks!
Best Regards,
Plamen

Hello,

I have described in detail the working of the elements in my previous reply.

The elements are changing the places because there are too many elements in the header for the particular width. If we try to adjust it using Custom CSS then it could affect the other elements in the header as well.

So we suggest you to Minify the elements in the header as in our demo layouts. This will fix the issue.

Or if you want to use the burger menu icon then you can use it from WoodMart >> Header Builder >> Edit header and use it in the header.

Screenshot for Clarification: https://ibb.co/n0Ptvxj

Best Regards.

Hello,

for now I decided to disable the sticky header altogether as it is not possible to reduce the number of menu items without sacrificing some usability.

By the way, the screenshot I’ve used in the first post is from the original Xtemos Woodmart live demo in the version Handmade link!

Regards,
Plamen

Hello,

I have checked the URL you provided.

There is no device of width 1040px screen size. And it is not possible to create 1000+ breakpoints for each pixel of the screen size.

Tablet devices have 1024px and it works correctly there.

Screenshot for Clarification :https://gyazo.com/7d94bfdd27ba326dd87ebc595139538b

And for all the screen sizes 1024+ it displays as a laptop.

We will keep your suggestion in mind and will consider adding some options for users to set the breakpoints. But currently there is no such option in theme settings available.

Best Regards.

[Author]

Posts