How can I make side Nav and top Nav fixed (in the same Position) even if the Browser is Resized?

Question

during scrolling the Top navigation bar and Side navigation bar stays in the position but the rest of the contents are moving even if the Browser is Resized or on other devices with small resolutions like Phones and Tabs

Answer 1

In the future, please provide a link to your Code Playground code so we can help you troubleshoot the specific issues you are running into.

The Code Playground should be relatively easy to find in the website version of SoloLearn, but if you are in the app version, it can be accessed via the curly braces, green circle with plus sign to add a new project, then select the project type (Web).

Top Nav:

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

Side Nav:

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

Answer 2

float won't work I would go with Janning⭐
Go for position:fixed

Answer 3

position: fixed; works but I want also to remain in the same position when the Browser is resized or on other devices with not large resolutions like phones and tablets

Answer 4

If "position: fixed;" isn't working for you, it would be great to see the code.

Answer 5

maybe try "float" attribute in css

Answer 6

Janning, then I want when they are all on the same page, the top nav and the side nav

Answer 7

I'm not really understanding the difference you are looking for. Examples might help. 😁