Menu sticky after banner not showing on tablet and mobile

cPanel cpanel
I’m struggling to get the menu bar to reappear after the fold on mobile and tablet modes - see this screen recording:

Site: https://test.bwinst.co.za
or
https://2b21ad-911a0.preview.sitehub.io/

Thank you in advance.

Hey there @Richard_Honey - unable to reproduce that yet actually on different browsers. When I scoll to web services, in all viewports the burger menu appears :frowning:

Thank you, André.

Here’s a more reliable test from an actual device (my phone):

SVID_20240429_132514_1.mp4 - Google Drive

As you can see, from the nav menu, it scrolls to the anchor (container with separator above “services” heading), but it needs that extra bit of scroll for the menu to reappear. Does this not happen when you test it?

PS: I want to play around with the mobile spacing in the builder, but I’ll wait for your reply first.

Hey. I think we got it now. Trying to reproduce it and take a deeper look at the preset there with a developer. Will let you know when I know more.

1 Like

Thank you, André.

I made another dummy/test site with no customizations, to see if the problem persists.

https://2c5764-9524a.preview.sitehub.io/

Unfortunately, it behaves the same. With the inspect tool, I noticed some body inline style values, once the menu reappears:

style="--spacer-height ..px;"

On desktop: 80px;
Tablet: 72.5px;
Mobile: 60px.

Might this be the cause?

I couldn’t find a way to change those values.
Also: vh might behave better than px?
:man_shrugging:

Hi André!
Here’s an update:

1

I think I made a mistake here. Using the browser inspect tool (even with device toolbar toggled) is NOT the same as using a real mobile phone or tablet. On my phone (Huawei - Android 12), the navbar displays/re-appears correctly.

2

I think this happened, because I changed the size of the logo, after uploading it:

Today, I reset the logo to the default size, and now the menu bar re-appears correctly when scrolling to the next element (again using my real phone, not Chrome devtools).

It seems to be fine, but let me finish setting up the page before I mark this as solved.

Question:
When using the blank theme, what is the preferred dimensions and aspect ratio of the logo, or doesn’t it matter?

1 Like

I think that depends on what you like to achieve and how you are using it. If I understood you correctly, the best way is to load a proper logo in the proper format (SVG) and then adjust it correctly on the website.

:thinking: Maybe I should start using SVG instead of JPG/PNG?
I’ll try that in future.

This is what I was referring to:

Logo Size

I was under the impression that the same size should be used, but now I think the div should flex, if flex:auto is used like this:

Flex
:man_shrugging: