In the theme, the nav menu floats OVER the content of the page on desktop. If we add some space to the top of the content to compensate for this, then on the desktop browser we get a bunch of ugly whitespace.
This shouldn't be as difficult to fix as it seems to be.
With that option on (Yes), even the logo is floating over the content.
With the option off, the navigation menu is still floating over the content. This means the content starts right below the logo. The content should start below the nav bar.
Here are two screenshots. One is desktop, where the nav menu is over top of the title. If I add a spacer at the top of the content to fix the desktop menu, it becomes a glaring whitespace on the mobile screen.
Now look at the homepage: Two screenshots. One where the desktop menu is sitting on top of the content, and one where there is too much space between the mobile menu and the content.
I dont see any issues with content overlapping the menu. Make sure your clear your browser cache correctly or elaborate step by step on how to reproduce the issue on my end.
I cant replicate the large whitespace issue on mobile in the homepage. Im using Android Google Pixel 4 Plus with google chrome and also I tried iPhone 8 with Safari latest version.
In the theme, the nav menu floats OVER the content of the page on desktop. If we add some space to the top of the content to compensate for this, then on the desktop browser we get a bunch of ugly whitespace.
This shouldn't be as difficult to fix as it seems to be.
Hi Thomas,
I m not sure to understand what you are asking.
Yes the menu float OVER the content. You can disable this option in the page settings
https://d.pr/free/i/JM65K8
But you are probably talking about Mobile device.
The menu should not overlap the page content. Please take a look without the admin bar. Please logout on mobile.
Thanks,
Alexandre from the Sonaar.io Crew
With that option on (Yes), even the logo is floating over the content.
With the option off, the navigation menu is still floating over the content. This means the content starts right below the logo. The content should start below the nav bar.
With the option ON, the logo AND the menu (so the whole header), will be floating over your content.
With the option OFF, it should not but if you have negative margins in your page/section, it will goes behind the header.
On which page does it happen exaclty? send me screenshot of what you see.
Thanks,
Max from the Sonaar.io Crew
https://ListentoTrouble.com/about
I managed to get it a little better.
Here are two screenshots. One is desktop, where the nav menu is over top of the title. If I add a spacer at the top of the content to fix the desktop menu, it becomes a glaring whitespace on the mobile screen.
Hi,
please clear your browser cache and check. I have added margin bottom in your menu options
Thanks,
Max from the Sonaar.io Crew
Cleared hosting cache, and firefox browser cache. Still looks like this. Looks the same in Chrome too.
Make sure to correctly clear your browser cache. It looks fine on 2 of my computers on Chrome as well as on Firefox and safari.
See screenshot: https://d.pr/i/mGdf2U
Thanks,
Max from the Sonaar.io Crew
Now look at the homepage: Two screenshots. One where the desktop menu is sitting on top of the content, and one where there is too much space between the mobile menu and the content.
Its because you have a negative margin on your section: https://d.pr/i/icTaki
Thanks,
Max from the Sonaar.io Crew
I think our mutual client may have done that to try to correct for the huge gap on the mobile menu. Maybe there is a better place to remove that?
Sorry I don't understand what you mean..have removed the negative margin yet? You must remove it.
Thanks,
Max from the Sonaar.io Crew
Yes I did
I dont see any issues with content overlapping the menu. Make sure your clear your browser cache correctly or elaborate step by step on how to reproduce the issue on my end.
Thanks,
Max from the Sonaar.io Crew
Right, I did say the negative margin was removed.
What this leaves is a large whitespace on the mobile version of the page.
I cant replicate the large whitespace issue on mobile in the homepage. Im using Android Google Pixel 4 Plus with google chrome and also I tried iPhone 8 with Safari latest version.
on computer, mobile resized window, I get this : https://d.pr/i/FPFYaf
same on mobiles.
Thanks,
Max from the Sonaar.io Crew
Same as in the attachment. Huge may be an exageration to you or I, but to the client it IS huge.
ok ive just set a negative margin for tablet/mobile. you can adjust the tablet and mobile aspect to suits your need.
see screenshot https://d.pr/i/TbVAZ8
Thanks,
Max from the Sonaar.io Crew
Thank you. I didn't realize the separate settings. This is what I was looking for all along.