[solved] Anybody having trouble with this code? Can you still see the close button after opening the menu?

Question

Hello, I was wondering if any of you have trouble with this code. When you open the menu, can you still see the close button?
It isn't seen when I run it in developer tools (inspect feature) in chrome in my PC. But works on my phone. But I'm still not sure about other phones. Please report if it doesn't work.
Thanks in advance : )

https://code.sololearn.com/WQ383vPhQOMw/?ref=app

Answer 1

As I already said to you in another question related to this code, I can't see the close button on my phone... I was giving a quick fix (but without knowing if it could break yout design in another device/viewport combinations ^^)

I suspect your footer to be the cause of the viewport growing (and needs for scroll horizontal AND vertical), as when menu is open viewport is scaled by approximativelly 2 (probably because you move your footer down and to the right (rather than shrink it or set 'hidden' on a good selected parent css property overflow)...

Answer 2

Mmm... the padding: wasn't it what I suggested to remove in my post on your other thread few days ago? ;)

Answer 3

Well, I don't see it my phone. However there are some general issues with the code. First of all you shouldn't use JavaScript for styling. You can create a extra CSS selector and toggle a class name with JavaScript to activate and deactivate it.
If you do that you can go into the Firefox dev tools (I think they are the best out there currently) and write your CSS into the page directly. There you can also test different smartphone layouts and see what works best. Later you can copy the CSS to your actual code and then you're done :)

Answer 4

You can use JavaScript to style elements but I recommend to do this by toggling a class name and doing the actual styling in a CSS file. Otherwise you will eventually bloat your whole JavaScript with style instructions and debugging the style will become a nightmare. Also I'd do as much as possible in CSS because it's generally cleaner and more efficient.

Answer 5

Aaron Eberhardt, one final thing please. In your first post did you mean you don't see the close button or do you see it? It wasn't clear to me.

Answer 6

Evans yes I can't see the close button. I guess it's because you use absolute units (px) instead of relative units like vw, vh and %. There are many different screen sizes so it's important to use relative units so your layout fits to every screen.

Answer 7

The close button is pushed over to the rigjt you need to reduce the width of the navbar

Answer 8

In here i have made the width and margin changes that make it work the way i believe you are wanting.
https://code.sololearn.com/WKywuRPlmexN/?ref=app

Answer 9

Better, as we (at least me) could see the close button and no scroll is implied... but I don't know if that fits your design expect: the opened menu doesn't cover the full screen width ;)

Answer 10

Well, thanks everybody. But I think padding on the sidenav is the cause (though I also think the footer rescaling the viewport as suggested by visph ). Earlier I had a problem with header and after removing paddings, it worked😃

Answer 11

I guess that the sidenav "push" the footer when it is opened... (but I've not investigate further)

Answer 12

Thanks Aaron Eberhardt, but why do you say not to change css with js? Isn't it more dynamic?

Answer 13

Maybe I'll have to replace padding with margin. And I checked but how is the footer connected with sidenav?

Answer 14

Hey thanks that was a valuable clue 😃

Answer 15

Delete the meta device width it's effect on it !
- make menu width with
99 vw
99vh ;

Answer 16

visph, Joshua Flynn, and everyone, it's fixed. I used JavaScript to get screen width, converted to string and used that value in px:

mySidenav.width = screen.width.toString() + "px";

...But didn't figure out what was wrong with 100% width😀

Answer 17

your cache on your browser may need to be refreshed