Need html/css help - move hamburger menu and sidebar to right side

Anvil Q&A
#1

If someone who has done this before could instruct me on this, that would be greatly appreciated.

#2

Hi @joinlook,

This should be what you’re after: Option to move sidebar to the right

1 Like
#3

Hi @bridget
I am trying to merge your APP with Anvil standard’s in order to get a “2 sidebar” template.
I’m almost done but I can’t find out why the “burger menù” on the right is still on the left of the Links flowpanel.
In your app it’s nicely the rightmost element.
Maybe I’ve messed a bit too much around with CSS and page template…
I’ll keep trying to make this work but in the meantime if someone can have a look and improve on this I think it could be useful to many.

https://anvil.works/build#clone:SHHRA2NRUF3FXRPB=PWBREP3F3VC5KS7WGT2CTJ53

My target is to rewrite with Anvil a legacy web application that had the 2 sidebars structure.

Thanks and BR

#4

Hi @aldo.ercolani,

Here’s a tweaked version with the burger menus floating right and left correctly:

https://anvil.works/build#clone:U4OKNLRYGTBEEOQY=Y3JEWNHOW2IWJ3LOLKFUB7R7

All I did was to move your right-sidebar-toggle higher up in the HTML. Both the app-bar-nav and sidebar-toggle-right elements have the float: right; property. We need to apply the float: right; property to the sidebar before the app-bar-nav for it to remain the rightmost element.

4 Likes
Problems with dual sidebars on mobile screens
#5

Ok, I see now.
Thanks a lot!!