Menu bar error responsive

Dear Madam/Sir,

I’ve noticed that the sticky menu bar does not adjust the menu items correctly when scrolling in a browser with a smaller width.

See the 2 screenshots attached. In the browser with a large width, the sticky header menu is displayed correctly. However, in the browser with a smaller width, the sticky header menu items fall off the bar.

How to correct for this?
I’ve tried a variant with fewer menu items, but the problem persists.

With kind regards,

Luca Spanjaard

Hi,

Could you please reupload your screenshots in a size smaller than 512KB? Or upload it to some cloud service like Dropbox or Google Drive.

Thank you in advance

Hi Eric,

Here’s a download link: https://wetransfer.com/downloads/c95b79031745d2e8b9518b68a40db92420180810174515/6f85aa

Hi,

Since you use long names for menu items for more than 5 menu items, it is difficult to fit them into one row at all resolutions. In this situation, we can recommend a few tips for solving this problem.

– Revise the number and length of the names of the main menu items.
– Revise the structure of the main menu with the ability to create a mega menu.
– Reduce the width and/or upload a smaller logo for the sticky header (http://prntscr.com/kh5xan).
– Move the language switcher to the top bar.
– Change the login/register element from the text style to the icon design.

– We also can provide your custom CSS code to make your header looks like the mobile header on the larger resolutions (for example from 1300px and lower). Also like a part of the solution, we can give custom code that reduces the font size of menu items and spacing between them on the sticky header on smaller screen resolutions. The main thing to pay attention to is the shorter the initial width of the main menu will be, the less customization will affect the usual appearance of your site.

Please, tell us what kind of CSS customization suits you and we will prepare the code for you.

Regards

[Author]

Posts