Good morning,
I’m working on the structure of a somewhat unusual Wordpress site.
For now, I’m only working on the structure (menu and template). And there, I have just completed the structure of the menu which is a vertical menu located on the left.
To create this vertical menu, I created a Container in Elementor in which I positioned the logo, the menu, the search bar and the social network icons. I took a screenshot for you:
When I consult the site on an iPad Pro (with LIVE LINK), I have a big problem respecting the positioning of the last elements of the vertical menu bar:
On Safari and Chrome, the menu bar is visibly higher than the height of the browser, and therefore, this navigation bar is truncated and the social network icons are outside the visible area.
On Firefox, no problem, the structure of the menu bar is as it should be.
What steps can be taken to replicate the issue? Feel free to include screenshots, videos, etc
System Details
Local Version: 9.0.1+6673
Operating System (OS) and OS version: MacOS Catalina 10.15.7
Security Reminder
Local does a pretty good job of scrubbing private info from the logs and the errors it produces, however there’s always the possibility that something private can come through. Because these are public forums, always review the screenshots you are sharing to make sure there isn’t private info like passwords being displayed.
I just made an interesting discovery.
If you refer to my previous screenshot, in the left column of Elementor features, at the bottom is the possibility to choose the positioning (top or bottom) of the container attachment area (which serves as a navigation bar) .
I’ll give you a screenshot below:
In this last screenshot, I changed the positioning to a low position. Well when I update the WordPress site and I consult it again with the iPad Pro, the truncation of the vertical menu bar (under Safari and Chrome) is now at the top, and it is the logo which is found truncated.
Well, I found the solution on my own. I just had to position the container at the bottom of the column relative to the bottom of the browser window and not relative to the top of the column.
