Positioning of burger menu

[robert_j_w]

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.

[Diana]

@robert_j_w, With which device you were testing this. Please share a screenshot too in a private reply here

[robert_j_w]

2 images: http://www.evaonlinecourses.eu/burger-menu-position-portrait-vs-landscape.zip I was testing on Samsung Galaxy S8+.

[Anshuman Sahu]

Hi, Please paste the following css in wp-admin>appearance>customize>custom css @media screen and (max-width: 250px) {header #trigger { top: 8px !important; }}  

[robert_j_w]

It did not work for me. Is 250px the proper value?

[Anshuman Sahu]

Hi, Try this with max-width 285. And adjust it according to different devices. Reply here if problem is not resolved.

[robert_j_w]

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.

[Anshuman Sahu]

Hi, @robert_j_w Thanks for your suggestion. We are working on this and trying to apply display:flex in our update.

[Author]

Posts