Smooth movement of logo to the right on opening the sidenavigation

Question

Hello, I need help with this code. When you open the sidenav, you'll see the text near the logo compressing and momentarily appearing below the logo. How do I make move right in a smooth movement?
Thanks in advance :D
https://code.sololearn.com/WQ383vPhQOMw/?ref=app

Answer 1

Calviղ why adding to body? it will be better to target .sidenav class ;)
Evans you could also improve the behaviour by removing from js tab:
document.body.style.marginLeft = "100%";
This give rise to the sidebar overflow the available width (at least on my phone) and force to horizontal scroll to make the close button accessible ;)
Also, you've attached the sidebar close handlet to the footer (in addition to the close button), but it will never be used, as only clickable when the sidebar is closed (otherwise it is hidden when the sidebar is open) ^^
I don't talk about your css: they are working, but would deserve a serious cleaning ;P

Answer 2

Add
body {
white-space: nowrap;
}

Answer 3

visph you're right, putting css in body selector is a wrong way. Thanks for the checking.

Answer 4

Yes: on my phone the button is hidden since I horizontally scroll...
Did you try to remove it? Maybe it will continue to works on others without... or not ^^
I must say that I had difficulty to understand all that (unnecessary in my opinion) js stuff, while you could mostly handle a sidebar with quite no js, if not no js at all and only css... that is: I would have impleted mostly differently ^^

Answer 5

I was thinking that the js outcomes from same source than the sidebar (w3schools.com)...
However, that's less surprising if this is your code than for a production of w3s (even I'm not fan, as I prefer from far mdn) ;P

Answer 6

Changing the position of #headtext and #logo to absolute works. But you will have to change left and top attributes.

Answer 7

Calvin , Visph, thanks. Adding nowrap to #head did the trick😂. Visph why do you suggest I remove the JS line. Isn't the close button showing on your phone? Works on mine. And how do you suggest I improve my CSS?
Thanks again

Answer 8

visph, you misunderstood it. I used JS for manipulating css. Different widths on different devices. I know you can do it with @media in CSS but I didnt and still don't know to use it😂😂😂