How can I keep the position of the burger menu at different resolutions of a device always vertically in the middle of the top navigation row? Using Adjust Menu padding in header does work on a smartphone with one resolution (1080 x 2220 px) but not with the other (2220 x 1080px=landscaape), when a smartphone is 90° rotated. I have not managed to get it worked using resolution dependent styling @media (max-width:....) . The burger does not scale like the logo does.
@robert_j_w,
With which device you were testing this.
Please share a screenshot too in a private reply here
2 images: http://www.evaonlinecourses.eu/burger-menu-position-portrait-vs-landscape.zip
I was testing on Samsung Galaxy S8+.
Hi,
Please paste the following css in wp-admin>appearance>customize>custom css
@media screen and (max-width: 250px)
{header #trigger {
top: 8px !important;
}}
It did not work for me. Is 250px the proper value?
Hi,
Try this with max-width 285.
And adjust it according to different devices.
Reply here if problem is not resolved.
I got it but with different pixel values. However, it would be much better to have the burger menu by default always positioned vertically centered within the header. Maybe using display:flex. The menu would then require an additional div container. Using the top value as the only control parameter does not seem to be a satisfactory solution.
Hi,
@robert_j_w
Thanks for your suggestion.
We are working on this and trying to apply display:flex in our update.