Sticky bar another menu problem now

Hi there

I made another sticky bar, only on mobile.

But it seems that it gives me strange behavior. When resizing to a smaller screen the bar is partially hidden at the top of the screen. See screenshots please:

What am I doing wrong?

Your help is kindly appreciated :slight_smile:

Hello,

Please provide your URL so we can take a closer look.

Thanks!

Website url provided via secure note in first post :slight_smile:

hi there,

Thanks for the URL!

Can you please make the bar relative, and let us know how this goes.

Hope this helps!

Thanks

Hi there

The bar is already set to relative…

Hello There,

Thanks for updating in! I have checked your site in smaller screens and this is what I am seeing:

Please keep in mind that resizing the browser while testing is not the correct way of checking how your site would look like in the screen size. You should be using the responsive emulator and make sure to refresh the page every time you check it in a screen size to make sure that the page has fully initialized.

Please check this out: https://developers.google.com/web/tools/chrome-devtools/device-mode/

Hope this helps.

Hi there

Indeed on my mobile phone it displays correctly. But when on a larger screen like a computer or laptop I get this problem. How can I solve this??

Hello there,

It seems your website is rendering your mobile menu fine on my end. Have you tried clearing your browser cache? What browser are you still seeing the error?

Let us know how it goes. Thank you.

I’m seeing the error both on chrome and on safari… See first image in the first post I sent you. When resizing my browser the mobile menu is not sticky to the top anymore but has two buttons only partially visible… On mobile phone it is OK but I also want it to be OK on desktop view when resizing the browser…

Hi there,

The top positioning is set to zero, but it’s rendered similar to the element with negative positioning. Would you mind providing your site’s login credentials in a secure note? It can be fixed by custom CSS but I like to check if this is just related to settings that can be changed.

Thanks!

Hey there

I changed the secure note of my first post with login credentials :slight_smile:

Thanks in advance!!

Hi there,

It’s weird, sometimes there is no header and sometimes there is. To fix this, please inspect the container (not the actual header bar) of your mobile menu bar. Then go to Flex Layout section and make sure the Vertical option is set it to Stretch.

They set a background color since it’s transparent.

Thanks!

Hi there

I did what you told. I set the container of the mobile menu bar to color white and vertical flex layout to stretch. But now it is showing completely transparent!!

Also, it is not showing when at the top of the screen. Only when scrolling down…

WEIRD :slight_smile:

You can see this on my home page (I did not yet make the changes for the headers on the other pages)

Please help!!!

Sorry! I did not clear cache yet. I think the problem is solved now :slight_smile: You may check it for yourself as well please :slight_smile:

Hi,

Working on my end as well.

Have a nice day! :slight_smile:

Please take a look at my header on my website. Still not working.

And everything is set correctly.

I think this is a bug in X.

Header behavior is very strange… Sometimes I have a mobile menu and sometimes I have not.

Sometimes the mobile menu container suddenly it is at the top of the screen above the rest of my header…

And suddenly it does not have a white background anymore.

I really need your help. The menu navigation is the most important piece on my entire site!

Thanks in advance…

Hi Woordenaar ,

I have reloaded your website many times and changed the browser window size to different sizes but I couldn’t reproduce this issue, I believe this issue is fixed. Please check this video screencast:

It might be a browser caching issue, either clear cache on Chrome or open Chrome incognito mode and recheck this issue.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.