[DerPatschen]

Hi all, I wanted to report a bug and wanted to know, if you might have a resolution. When switching from the normal desktop view to the mobile view, an error occurs when the burger menu appears at precisely at 991 pixels. The header seems to crash. The buttons are not in one line anymore but written from top to bottom.

Maybe you know a fix. Thanks!

[serkan]

Hi,
Thank you for reporting this — and for sharing both links! 🙏

We’ve checked the issue, and you’re right: at around 991px viewport width, the header layout switches from the desktop to the mobile version. In some cases, depending on the browser zoom level or caching, the navigation elements can momentarily stack vertically instead of aligning in one line.

To fix this on your website, please add the following small CSS snippet to your Customizer → Additional CSS section:

@media (max-width: 991px) { .site-header .header-buttons { flex-wrap: nowrap !important; align-items: center !important; }
.site-header .header-buttons a { display: inline-flex !important; } }

Then clear your browser and site cache.
This will ensure the header buttons stay aligned correctly when switching between desktop and mobile view.

We’ll also pass this minor responsive edge case to our dev team so it can be adjusted in a future update of the F8 theme.

Thanks again for pointing it out — we appreciate your detailed feedback!
Please let us know if the CSS fix works for you.

Kind regards,
Serkan

[DerPatschen]

Thanks for the code – it worked! I couldn’t make it work on my own. Lol

[serkan]

Hi,

That’s great to hear — I’m really glad the fix worked! 😄
Don’t worry, these small responsive quirks can be tricky to catch.

If you notice anything else while testing on different devices, feel free to let us know anytime.

Have a great day and enjoy building your site!

Best,
Serkan

[DerPatschen]

Hi Serkan,

sorry to bother you again with this, but the issue has come back and I can’t seem to resolve it.
The code worked perfectly. However, for some reason it suddenly stopped working. Even if I reset the header back to the default layout and only use this code (without any other custom changes), the problem at 991px reappears: when the burger menu shows up, the header “breaks” and the buttons are stacked vertically again instead of staying in one line.

I’ve cleared all caches, loaded an old backup and tested in different browsers, but the behaviour is still the same.

Do you have any idea what might be causing this or how I could debug it further?
I’m very sorry again for coming back with this issue, and thanks a lot for your help and patience…

[serkan]

Hi,
I will forward this issue to our developer and i will keep you updated.
Thanks

[DerPatschen]

Thank you, that you will take a 2nd look. And just let me know, if you need more infos.

[ahmetsali]

Hi, can you please update your theme to the latest version, and the issue should have gone away.

Thanks.

[DerPatschen]

Hi ahmetsali,

Thanks again for taking your time! It looks already better, but I still needs a update in the future, because it’s still not in the correct position. I don’t wanna rush you. I can wait for the next bigger update of the theme. Thanks again!

[DerPatschen]

I think a found a fix. It’s in the main.css. Change line 990 to the following.

Before:
@media screen and (max-width: 991px) {

After:
@media screen and (max-width: 991.93px) {

[serkan]

Thanks for the feedback. Have a nice day.