AppLayout WebComponent has primarySection property.
https://cdn.vaadin.com/vaadin-app-layout/2.0.0-beta1/#/elements/vaadin-app-layout%23property-primarySection
How do I change it to ‘navBar’ using Java or CSS?
I assume you mean primarySection (the component doesn’t have a primaryMode´property).
If so, then navbar is already the default. You can change this to Drawer using
AppLayout.setPrimarySection(Section.DRAWER)
Yes. Of course primarySection is correct.
Even with primarySection='navbar' I have drawer above navbar at mobile screens.
https://vaadin.com/attachment/259d911d-ff30-483d-a9a9-1a6cd7c52699/Screenshot_20201229_131842.png
At desktop screens drawer is below, but drawer pushes content to the right, which is okay for desktop.
I would like to have drawer under navbar at mobile screens as well, but keeping current drawer behaviour (when drawer goes above content).
How to do it?
Yes, this is due to the drawer being opened as an overlay in small devices. Not sure if there is a way to override this though.
Actually, there might be a way, namely by setting the following style in the AppLayout:
getElement().getStyle().set("--vaadin-app-layout-drawer-overlay", "false");